Débordement visible ne fonctionne pas dans IE 8

Question

J'ai une zone de liste qui montre quand je mouseover une boîte input. Mon problème est la liste même si je spécifie la règle CSS overflow:visible il montre toujours maintenant toute la liste et à la place il adapte la liste à la largeur de l'extérieur div. Mais si j'essaie de l'afficher en utilisant Firefox ou Chrome, toute la liste est affichée. S'il vous plaît aider.

Merci, Sherry

---

Mise à jour: Voici le code html

<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> 

---

Voici le 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;} 

---

et la syntaxe jquery que j'utilise

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


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

Answer 1

Il n'y a aucun élément avec l'ID « ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel », qui est ce que vous faites référence dans votre sélecteur jQuery pour slideDown(). Vous voulez sans doute ceci:

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

Votre élément div.restHotel est réglé sur visible par défaut, il est donc visible tout de suite, au lieu d'attendre que le curseur planer sur la zone de saisie.

Votre exemple de code ne définit pas la méthode JavaScript setHotel(). À part cela, votre exemple semble fonctionner dans IE9 Beta en utilisant le mode navigateur IE8. S'il y a encore quelque chose d'anormal que votre exemple de code ne démontre pas, alors vous voudrez peut-être fournir plus d'informations.