2010-11-20 20 views
0

Ich habe ein Listenfeld, das zeigt, wenn ich mouseover eine input Box. Mein Problem ist die Listbox, auch wenn ich den CSS-Code rulee overflow:visible gebe, es zeigt immer noch das ganze Listbox an und stattdessen passt es die Listbox an die Breite der äußeren div an.Überlauf sichtbar funktioniert nicht in IE 8

Aber wenn ich versuche, es mit Firefox oder Chrome zu sehen, wird die ganze Listbox angezeigt. Bitte helfen Sie.

Danke, Sherry


Update: Hier ist der HTML-Code

<div id="book_panel"> 
    <div id="book_heading"> 
     <div style="padding:5px 0 0 5px;"> 
      <span style="font-size:22px; font-family: Arial, Verdana, Sans-Serif;">Book Now</span><span style="font-size:19px; font-family:Arial;color:#e9d59e;">&nbsp;|&nbsp;</span> 
      <span style="font-size:12px; font-family: Arial, Verdana, Sans-Serif;color:#e9d59e;">Best rate guarantee</span> 
     </div> 
    </div> 
    <div id="booking_form_row1"> 
     <div id="row1Row1"><label id="findHotel">Hotel</label></div> 
     <div id="row1Row2" > 
      <div id="hotelSelector"> 
       <input id="txtHotel" name="txtHotel" value="Select a Hotel" runat="server" /> 
       <input id="txtHotelValue" type="hidden" runat="server" /> 
       <div class="restHotel"> 
        <table border="0" cellpadding="0" cellspacing="0"> 
         <tr><td>&nbsp;<b>Hotels</b></td></tr> 
         <tr onclick="return setHotel(1,'Flora Grand, Near Al Ghurair Shopping Mall, Dubai');" class="highLightRow"> 
          <td width="150px;"><a href="#" title="Flora Grand, Near Al Ghurair Shopping Mall, Dubai" id="lnkHotel1">Flora Grand</a></td> 
          <td width="200px;">Near Al Ghurair Shopping Mall</td> 
          <td width="50px;">Dubai</td> 
          <td><asp:Image ID="Image5" runat="server" ImageUrl="../media/images/four_star.png" Width="44" Height="8" /></td> 
         </tr> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 

die CSS

#book_panel {overflow:visible!important;padding:0!important;max-height:330px;width:270px;position:absolute;color:#fff;top:120px; left:10px; z-index:9999; border: 0px red solid; background-color:#201913; filter: alpha(opacity=90); opacity: 0.9; -webkit-opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";} 
#book_panel #book_heading {display:block;position:relative;border: 0px red solid; text-align:left; width:270px;margin: 0; height:30px;background-color:#362615;filter: alpha(opacity=90); opacity: 0.9; -webkit-opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";} 

.hiLightRow{background-color:#201913; cursor:hand;} 

#book_panel label {width:80px; display:block; margin:2px 0 5px 0;padding:0; float:left; color: #fff; font: normal 12px Arial, Verdana,sans-serif!important;} 
#book_panel select{width:55px;color: #000;background: #f9f9f9;border: 1px solid #e9d59e; padding-left: 3px;} 
#book_panel input {font-size:13px;} 
#book_panel a:hover{background-color:#201913;color:#fff;} 

#book_panel div#booking_form_row1 input {width:240px;} 
#book_panel div#booking_form_row1 {float:left; width:250px;position:relative;margin: 0 10px 0 10px; border: 0px solid red;} 
#book_panel div#booking_form_row1 #row1Row1 {width:250px;height:19px;float:left;margin-top:3px;} 
#book_panel div#booking_form_row1 #row1Row2 {width:250px;float:left;margin-top:3px;border: 0px solid red;} 

/*Hotel Fancy Listbox */ 
#book_panel div#booking_form_row1 #row1Row2 .restHotel{position:absolute;z-index:9999; width:450px!important;overflow:visible!important;} 
#book_panel div#booking_form_row1 #row1Row2 table {float:left;margin:0;padding:0;width:450px!important;border:1px solid #a57e03;background-color:#6b5527;} 
#book_panel div#booking_form_row1 #row1Row2 tr {width:450px;color:#fff;font: 12px Arial, Verdana, sans-serif;padding-left:3px;padding:2px 3px 2px 5px;overflow:visible!important;} 
#book_panel div#booking_form_row1 #row1Row2 td a{color:#fff;font: 13px Arial, Verdana, sans-serif;padding:1px 2px 1px 4px;} 

Hier

und die Jquery-Syntax, die ich

$("#ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel").hover(function() { 
     $(".restHotel").slideDown("300"); 
}); 


$(".restHotel").mouseleave(function() { 
$(this).slideUp("300"); 
}); 
+3

Willkommen bei SO. Bitte immer Code zeigen, ohne dass es normalerweise unmöglich ist zu helfen –

+0

Etwas HTML, CSS wäre hilfreich. – Zlatev

+1

Das Tag "dhtml"? "Ja wirklich?" : D –

Antwort

0

Es gibt kein Element verwenden, um mit der ID "ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel", das ist, was Sie in Ihrem jQuery-Selektor für slidedown Referenz(). Wahrscheinlich wollen Sie diese stattdessen:

$("#txtHotel").hover(function() { 
    $(".restHotel").slideDown("300"); 
}); 

Ihr div.restHotel Element standardmäßig sichtbar eingestellt ist, so ist es sofort sichtbar, sondern für den Cursor des Wartens über das Eingabefeld zu schweben.

Ihr Beispielcode definiert die JavaScript-Methode setHotel() nicht.

Ansonsten scheint Ihr Beispiel in IE9 Beta mit dem IE8 Browser Mode zu funktionieren. Wenn Ihr Beispielcode weiterhin nicht angezeigt wird, können Sie weitere Informationen bereitstellen.

+0

Hallo Ryan, ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel ist die ID des Txthotels zur Laufzeit. Ich benutze Umbraco, um unsere Website zu betreiben, weshalb es so referenziert wird. – Sherry

+0

IE9 ist nur für Vista und Windows 7 verfügbar und wir verwenden nur Windows XP. – Sherry

+0

Deshalb habe ich IE9 in "IE8-Modus" gesetzt, als ich Ihre Seite angesehen habe. Ich habe das Problem, das du beschrieben hast, immer noch nicht gesehen, obwohl ich dein Problem vielleicht falsch verstanden habe. Ich kann es morgen in den aktuellen Versionen von IE7/8 noch einmal anschauen. In der Zwischenzeit, wenn Sie weitere Details oder Screenshots des Problems haben, können diese hilfreich sein, um Ihre Frage hinzuzufügen. – Ryan

Verwandte Themen