Absolute Positioned DIV within another Absolute positioned DIV does not show on IE

Question

Please refer to http://stonepay.sonikastudios.com/css/style.css as well as http://stonepay.sonikastudios.com/ for the actual page reference if you like.

I have a dropdown menu that shows up on click. This works on the "Our Services" and "Our Projects" menu items, and the fade-in and all works just fine. Being dropdown menus that cannot impede with other layout elements, the div.submenu elements are all set to position:absolute; (and of course, the parent div is set to position:relative; so it's not absolute to the page, but rather, to the menubar itself).

The div.submenu_close elements are nested at the end of each div.submenu intsance. It is also set to position:absolute;

To summarize, here's my 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;
}

And the HTML structure is liek this (simplified to emphasize only structure):

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

This makes my .submenu_close divs appear just fine on the bottom right corner just fine.. EXCEPT on internet explorer (of course it's IE again).

As you can see I have the z-index elements set up just fine. When I change the display mode of the .submenu_close to float:left instead of position:absolute, it shows up just fine, so I know it's not a z-index issue.

Any help is greatly appreciated!

Answer 1

The issue is rather caused by the IE6/7 broken stacking order (also known as the z-index bug). What you need to fix it is to raise the z-index of your close button to more than its container.