CSS mouse-over overlapping tabs?

css, html, tabs

Solution

Use 24bit PNGs with alpha transparency .. then it shouldn't matter that they overlap. You could position them in a line floated left, with a negative margin left (useful if the tabs are not predetermined), or as you said, you could position them absolutely.

Note, in IE6, alpha trans is not supported. So maybe you'll want to target that browser with no 24 bit transparency images, or try and use the ie6pngfix.

Here is what you could do

<ul>
    <li><a href="">link1</a></li>
    <li><a href="">link1</a></li>
    <li class="active"><a href="">link2</a></li>
</ul>

ul li {
    display: block;
    float: left;
    margin-left: -20px;
    background: url(path/to/image.png) no-repeat;

}

ul li:hover { /* will not work in ie6 - either change the background to the anchor, or add a slice of js */
     background-position: -200px 0; /* i'm using sprites in this example */
}

ul li:first-child {
    margin-left: 0;
}

ul li.active {
    position: relative; /* Mark reminded me I needed to set a position other than static */
    z-index: 100;
}

Problem

Original source