Drop-down menu going beyond rotating image banner only in IE6 and IE7

HTML & CSS
1

Only in IE6 and IE7 is my down-down menu is going beyond the rotating image banner. The drop-down menu appears in front of the banner in IE8, Firefox 3, Chrome, Safari, and Opera.

Here is my site.

2

Hi iStudent,

Rob is on the right path. IE6/7 have a z-index bug that needs to be controlled with manual settings of the stacking order for positioned elements.

Try this:

#banner already has position:relative and z-index-1 applied to it


[B]#banner [/B]{
[B]    position: relative;
    z-index: 1;[/B]
    width: 960px;
    height: 190px;
    background: #000000;
}

Now do the same for the #nav but set it higher.

[B]#nav[/B] {
    float:left;
    width:960px;
    background:#F6F4CF url(images/nav_brown.jpg) repeat-x; /* non-active background image for the main menu */
    font:normal 16px/40px Arial, Helvetica, Verdana, sans-serif;
[COLOR=Blue]    position:relative;
    z-index:2;[/COLOR]
}

Your slideshow script is generating some divs and setting z-index:1000 on them but they will not climb higher than their parent #banner which is z-index:1.

3

I experimented with different z-index values, but unfortunately it didn’t resolve the issue.

4

Have a look at z-index. That might solve it.

5

That’s a shame. You’ve tried applying different z-index values to both the banner and menu, with the higher number for the menu? You might even need to apply z-index to the nested ul li too. Just a suggestion. If you still don’t get an answer by late tomorrow I’ll look more closely.

6

Thanks Rayzur,

Adding:



    position:relative;
    z-index:2;

to the #nav resolved the issue! Major thanks!