Question

I am having an issue in IE8 where my dropdown-style navigation is going behind another element. I have tried everything from setting the offending element’s zindex to 1 and the dropdown to 99 and 999. I think it has something to do with the fact that I’m using 960 grid, as it worked before when I wasn’t.

Update: Problem occurs in IE8.0.6 but not IE8.0.7

Update 2: Problem occurs in IE8.0.6001.187021C but not IE8.0.6001.1870

I hate Microsoft.

Here is my stylesheet and you can see the issue happening here

Answer 1

The issue also appears in IE 7.0.6002.18005, I don’t have 8 but the following seems to work on for me locally and looks like it doesn’t break Firefox so maybe it would work for IE8 as well but then again I don’t know if its feasible for you or if it will cause you problems in future updates but its worth a shot:

In the main page I replaced in a few tags :

a) <div id="left_container" class="grid_1">

with
<div id="left_container" class="grid_1" style="position:static;">

b) all occurnces of <li class="last">
with <li class="last" style="position:static;">

OR

Find/replace following class & selector in external CSS as follows:

960grid.css

.container_5 .grid_1 {
    WIDTH: 182px;
      position:static;
}

style.css

#drop_nav .last {
    BORDER-BOTTOM: #fff 0px solid;
      position:static;
}

Btw I just tried it on IE8 6001 18720 & there was no issues at all with your web page. I didn’t have to change anything & it displayed ok (didn’t edit the css or anything just visitied the url and it worked).