Here is the site.

When viewed in Internet Explorer 7, the tabs in the main navigation overlap incorrectly-- items to the right always overlap the active tab in spite of the active tab's high z-index. All modern versions of browsers made by Mozilla, Google, Apple, Opera, and others stack the tabs correctly.

Here is my markup:

<div id="nav">
    <ul> 
        <li><span class="active">Home</span></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Projects</a></li> 
        <li><a href="#">Get Started</a></li> 
    </ul>
</div>

Here are the relevant styles:

nav li {
    float: left;
    height: 20px;
    margin: 0px;
    padding: 5px 10px 0px 10px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 160px;
}
nav li .active {
    background: url(path/to/tab-active.png);
    height: 22px;
    left: -13px;
    padding: 8px 0px 0px 0px;
    position: absolute;
    top: -2px;
    width: 205px;
    z-index: 980;
}
nav li a {
    display: block;
    width: 159px;
}

I've tested several variations of setting z-index on different elements, but mostly causing the design to break in other browsers. Please let me know if you see what id amiss.

1 answer

1
point

There are several issues at play here. The main point is that you're applying position:absolute to your active li tag. Absolute positioning takes the item out of the document flow altogether, and I believe z-index may not work correctly for you (in some browsers).

Try applying your background images to the links inside your list items, nav li a. As they display:block, they will display background images quite nicely. Also, add your active state to the link as well, so instead of nav li.active it would be nav li a.active.

See if that gets you on the right track. This link should shed some light on what you're trying to do - check out the CSS about 2/3 the way down the page.

Answered over 7 years ago by Chip Cullen