DIV с абсолютным позиционированием в другом DIV с абсолютным позиционированием не отображается в IE

Question

Пожалуйста, обратитесь к http://stonepay.sonikastudios.com/css/style.css, а также http://stonepay.sonikastudios.com/ для ссылки на актуальную страницу, если хотите.

У меня есть раскрывающееся меню, которое отображается при нажатии.Это работает с пунктами меню «Наши услуги» и «Наши проекты», а затемнение и все работает просто отлично.Будучи выпадающими меню, которые не могут мешать другим элементам макета, элементы div.submenu устанавливаются в положение: absolute;(и, конечно, родительский div установлен в положение: относительное; поэтому оно не является абсолютным для страницы, а для самой строки меню).

Элементы div.submenu_close вкладываются в конце каждого элемента.div.submenu intsance.Он также установлен в положение: absolute;

Подводя итог, вот мой 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;
}

И структура HTML выглядит так (упрощенно, чтобы подчеркнуть только структуру):

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

Это заставляет мои .submenu_close div'ы казаться очень хорошими в правом нижнем углу, очень хорошо .. ЗА ИСКЛЮЧЕНИЕМ в Internet Explorer (конечно, это снова IE).

Как вы можете видеть, я настроил элементы z-index просто отлично.Когда я изменяю режим отображения .submenu_close на float: left вместо position: absolute, он отображается очень хорошо, поэтому я знаю, что это не проблема z-index.

Любая помощь очень ценится!

Answer 1

Проблема скорее вызвана IE6 / 7 нарушенным порядком стекирования (также известным как ошибка z-index). Чтобы исправить это, нужно поднять z-индекс кнопки закрытия больше, чем на ее контейнер.

Answer 2

Это может быть связано с известной ошибкой в ​​IE7 (см. Правую боковую панель) относительно вложенных абсолютных, фиксированных и относительных делений. Порядок, который вы объяснили, не совсем задокументирован, но, исходя из моего опыта, вам нужно избегать вложения div с этими атрибутами, если вы хотите, чтобы он работал корректно во всех версиях IE.