Position absolue DIV dans un autre DIV positionné absolu ne s'affiche pas sur IE

Question

Veuillez vous référer à http://stonepay.sonikastudios.com/css/style.css ainsi que http://stonepay.sonikastudios.com/ pour la référence de la page réelle si vous le souhaitez.

J'ai un menu déroulant qui apparaît sur le clic. Cela fonctionne sur les éléments de menu «Nos services» et «Nos projets», et le fondu d'entrée et tout fonctionne très bien. Étant des menus déroulants qui ne peuvent pas gêner avec d'autres éléments de disposition, les éléments div.submenu sont tous positionnés sur: absolute; (et bien sûr, le div parent est mis à la position: relative, donc ce n'est pas absolu à la page, mais plutôt à la barre de menus elle-même).

Les éléments div.submenu_close sont imbriqués à la fin de chaque élément divsenu. Il est également mis à la position: absolue;

Pour résumer, voici mon CSS:

.submenu { 
    position:absolute; 
    width:auto; 
    padding:0px 10px 0px 10px!important; 
    background-image:url('/images/submenu_bg.jpg'); 
    background-repeat:repeat-x; 
    z-index:99; 
    background-color:#262626; 
    display:none; 
} 

.submenu_column { 
    margin-top:10px !important; 
    margin-bottom:10px !important; 
} 

.submenu_close { 
    width:11px !important; 
    height:11px !important; 
    background-image:url("/images/submenu_close.png"); 
    background-repeat:no-repeat; 
    position:absolute; 
    bottom:7px; 
    right:7px; 
    z-index:15 !important; 
    border:1px solid #f00; 
    display:block; 
} 

Et la structure HTML est liek ce (simplifié pour mettre l'accent sur la structure seulement):

<div id="menubar"> 
    <ul id="menu"> 
     <li class="current originalcurrent"><a href="/">HOME</a></li> 
     <li><a href="/about-us.php">ABOUT US</a></li> 
     <li><a href="/our-services.php" id="services_menu" class="topmenu">OUR SERVICES</a></li> 
     <li><a href="/our-projects.php" id="projects_menu" class="topmenu">OUR PROJECTS</a></li> 
     <li><a href="/financing-leasing.php">FINANCING &amp; LEASING</a></li> 
     <li><a href="/contact-us.php">CONTACT US</a></li> 
    </ul> 

    <div class="submenu" id="services_submenu"> 
     <div class="grid_3 alpha omega right_dotted submenu_column"> 
     </div> 
     <div class="grid_3 omega right_dotted submenu_column" style="width:175px;"> 
     </div> 
     <div class="submenu_close"><a href="#"><img src="/images/blank.gif" width="100%" height="100%"></a></div> 
     <div class="clear"></div> 
    </div> 


    <div class="submenu" id="projects_submenu"> 
     <div class="grid_3 alpha omega right_dotted submenu_column"> 
     </div> 
     <div class="grid_3 omega right_dotted submenu_column" style="width:175px;"> 
     </div> 
     <div class="submenu_close"><a href="#"><img src="/images/blank.gif" width="100%" height="100%"></a></div> 
     <div class="clear"></div> 
    </div> 
</div> 

Cela fait mes .submenu_close divs apparaissent très bien sur le coin en bas à droite juste très bien .. SAUF sur Internet Explorer (bien sûr c'est encore IE).

Comme vous pouvez le voir, j'ai les éléments z-index mis en place très bien. Quand je change le mode d'affichage du .submenu_close à float: left au lieu de position: absolute, il apparaît très bien, donc je sais que ce n'est pas un problème d'index z.

Toute aide est grandement appréciée!

Answer 1

Cela peut être dû à a known bug in IE7 (voir barre de droite) en ce qui concerne les divs absolus, fixes et relatifs imbriqués. L'ordre que vous avez expliqué n'est pas exactement comme documenté, mais d'après mon expérience, vous devez éviter d'imbriquer divs avec ces attributs si vous voulez qu'il fonctionne correctement dans toutes les versions de IE.

Answer 2

Le problème est plutôt dû au IE6/7 broken stacking order (également connu sous le nom de bogue d'index z). Ce que vous devez corriger c'est augmenter l'index z de votre bouton de fermeture à plus que son conteneur.