IE dropdown z-index bug

Question

I have a problem with a drop down menu under IE (6 and 7).

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

As you can see, the drop-down list is hidden behind the main content area in IE.

A known mistake and general advice is to set the z-index for the header and content areas, so IE knows its "place" described in the article here: http://bit.ly/coSPcI

I set the zhe index of the .header div to 20 and .featured, .content, .primary, .main to 1, trying to find the right div to fix the problem. While the drop-down menu has ceased to be hidden behind the .featured div, it is still hidden behind the main contents of the div (either .primary, or .main, .secondary is fine).

Z-indices for these divs are set in a separate style sheet, i.e. css, in case someone searches for them.

If anyone can give some advice, I would be very grateful.

Answer 1

Here you will find the original solution - a Swiss credit site . This works, but uses the sophisticated z-index solution. Here's a very simple and improved solution - Jeyjoo Image Gallery This works in IE6 +, firefox, opera, safari and chrome

Decision

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

why does he work

You have to tell IE how the two divs are related to each other.

Answer 2

IE, z-, z-index (z-index: 1), .

, , ul.nav z-index 1. .

: , ul , div, , ul.nav z-. , , JS UL. HTML/CSS/JS, , , , this page .

Answer 3

z-index - Chkredit - - IE 100% CSS ( javascript).

IE z-index . z- CSS -. z-index -1 , .

I am working on the same issue for my own image gallery right now (go to the "top image" page) - jeyjoo image gallery . When I choose this, I will post the complete solution here.