Ошибка выпадающего z-индекса в IE

Question

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

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

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

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

Я установил z-index для.header div в 20, а.featured,.content,.primary,.main в 1, пытаясь найти правильный div для решения проблемы. Хотя раскрывающийся список перестал скрываться за элементом.featured, он все еще скрывается за основными элементами содержимого (либо.primary, либо.main,.secondary - это нормально).

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

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

Answer 1

Ok оригинальное решение здесь - швейцарский кредитный сайт. Это работает, но использует сложное решение z-index. Здесь очень простое и улучшенное решение - галерея изображений Jeyjoo. Работает в IE6+, Firefox, Opera, Safari и Chrome.

Решение

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, как два div связаны друг с другом.

Answer 2

Я управлял работой z-index здесь, в подменю - Chkredit - швейцарский кредитный веб-сайт. Работает во всех версиях IE и имеет легкий и 100% CSS (без javascript).

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

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

Answer 3

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

Поэтому я думаю, что вы должны дать вашему ul.nav z-index 1. Я на самом деле написал об этом в своем блоге.

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