IE dropdown z-index bug

I'm having a problem with a dropdown menu under IE (6 and 7).

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

As you can see, the dropdown hides behind the main content area in IE.

It's a known bug and general advice is to set a z-index for header and content areas, so IE knows their "place", explained in the article here: http://bit.ly/coSPcI

I've set the z-index of .header div to 20 and .featured, .content, .primary, .main to 1, trying to find the right div to fix the problem. While the dropdown stopped hiding behind the .featured div, it still hid开发者_如何学编程es behind the main content divs (either .primary or .main, .secondary is fine).

The z-indexes for these divs are set in a separate stylesheet, ie.css, in case someone'll be looking for them.

If someone could provide some advice, I'd be very grateful.

Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution. Here is very simple and improved solution here - Jeyjoo stock image gallery This works in IE6+, firefox, opera, safari and chrome

Solution

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

The CSS

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

why it works

You have to tell IE how the two divs relate to one another.

In IE if an absolutely positioned element has a z-index then it’s containing relatively positioned element must specify a z-index (z-index:1) in order for the absolutely positioned element to be able to appear on top of other relatively positioned elements.

So I think that you need to give your ul.nav a z-index of 1. I actually wrote about this on my blog.

Updated: So if I change the visibility style of the hidden ul to visible it appears above the div as it should as long as ul.nav has a positive z-index value. Therefore, I think that this has something to do with the way your JS renders the dropdown menu from that hidden UL. Unless I have all your HTML/CSS/JS I can't really solve this so I can only point you in the right direction and I think that understanding this page will help you a lot.

I managed a z-index work around here on a submenu - Chkredit - swiss credit website Works in all versions of IE and is light and 100% CSS (no javascript).

IE does not use z-index correctly. Check the z-index's in the CSS code of the website. You will need to put a z-index -1 on the items your menu is hiding behind.

I working on exactly the same problem for my own image gallery right now (go to "top image" page) - jeyjoo image gallery. When I sort this one out, I will post the full solution here.