IE dropdown z-index bug

Question

У меня проблема с выпадающим меню под IE (6 и 7).

http://www.amaconsulting.pl/promocje.html

Как вы можете видеть, выпадающий прячется за основное содержимое в IE.

Это известная ошибка и общий совет, чтобы установить Z-индекс для заголовков и содержимого областей, так что IE знает свое «место», поясняется в статье здесь: http://bit.ly/coSPcI

Я установил Z- индекс .header div до 20 и .featured, .content, .primary, .main to 1, пытаясь найти правильный div, чтобы исправить проблему. Пока выпадающее меню перестало скрываться за .featured div, оно все еще скрывается за основными разделами контента (либо .primary, либо .main, .secondary is fine).

Z-индексы для этих divs задаются в отдельной таблице стилей, т.е..css, в случае, если кто-то их будет искать.

Если бы кто-то мог дать некоторые советы, я был бы очень благодарен.

Answer 1

В IE, если абсолютно позиционированный элемент имеет z-индекс, то он содержит относительно позиционированный элемент, который должен указывать z-index (z-index: 1), чтобы абсолютно позиционированный элемент мог отображаться сверху другие относительно позиционированные элементы.

Так что я думаю, что вам нужно указать свой ul.nav z-index 1. Я на самом деле написал об этом на my blog.

Обновлено: Так что, если изменить стиль видимости скрытых ул видимый он появляется над DIV, как должно, пока ul.nav имеет положительное значение Z-индекс. Поэтому я считаю, что это имеет отношение к тому, как ваш JS отображает выпадающее меню из этого скрытого UL. Если у меня нет всего вашего HTML/CSS/JS, я не могу это решить, поэтому я могу только указать вам в правильном направлении, и я думаю, что понимание this page поможет вам много.

Answer 2

Мне удалось создать z-index здесь в подменю - Chkredit - swiss credit website Работает во всех версиях IE и является легким и 100% CSS (без javascript).

IE не использует z-index правильно. Проверьте индекс z в коде CSS веб-сайта. Вам нужно будет поместить z-index -1 на предметы, которые скрывается за вашим меню.

Я работаю над такой же проблемой для своей собственной галереи изображений прямо сейчас (перейдите на страницу «Главная страница») - jeyjoo image gallery. Когда я разобрался с этим, я опубликую здесь полное решение.

Answer 3

Ok оригинальное решение здесь - Swiss credit website. Это работает, но использует сложное решение z-index. Вот очень простой и улучшенное решение здесь - Jeyjoo stock image gallery Это работает в IE6 +, Firefox, Opera, Safari и хром

Решение

HTML-

<div id="container_page" class="container_page"> 
    <div id="container_header" class="container_header"> 
    NAV BAR GOES HERE 
    </div> 
    <div id="container_body" class="container_body"> 
    ...body text... 
    </div> 
</div> 

CSS-

#container_page #container_header {position:relative;z-index:2;} 
#container_page #container_body {position:relative;} 

почему это работает

Вы должны сказать IE, как две дивы связаны друг с другом.