Question

I recently took over a project that a colleague was working on and I have come up against a brick wall in the form of an IE 7 bug. Basically, I am building a page that has a div at the bottom with 3 ULs stacked on top of each other inside (back, middle, front), with a link with a background image inside each li.

What I want to achieve is when you roll over one of the links then its z-index is set higher than that of all the other lis and the li is thus brought to the front, regardless of what row it is in. I have managed to do this perfectly in FF, IE8 & Chrome but IE6 & 7 are simply not playing ball.

I am aware of the z-index bug referred to here: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ and have tried to work around it by adding a higher z-index value on the li than the a but to no avail. The only way I can bring the li to the front is by putting a higher value on the ul itself, but of course this brings the whole set of links to the front which I don’t want. Any ideas?

I would post a link but it is on our development server at work which is not accessible outside the firewall, so here is my html code:

<div class="noMouseOut thumbnailWrap">
    <ul class="thumbnail_list noMouseOut back" style="width: 480px; left: 210px;">
        <li style="left: -48px;"><a style="background-image: url("images/back1.jpg"); width: 96px; height: 126px;" class="replace rollover" title="back row 1" href="">back row 1</a></li>
        <li style="left: 433px;"><a style="background-image: url("images/back3.jpg"); width: 94px; height: 112px;" class="replace rollover" title="back row 4" href="">back row 4</a></li>
    </ul>
    <ul class="thumbnail_list noMouseOut middle" style="width: 680px; left: 130px;">
        <li style="left: -60px;"><a style="background-image: url("images/middle1.jpg"); width: 120px; height: 86px;" class="replace rollover" title="Middle 1" href="">Middle 1</a></li>
        <li style="left: 131px;"><a style="background-image: url("images/middle2.jpg"); width: 78px; height: 104px;" class="replace rollover" title="Middle 2" href="#slide2">Middle 2</a></li>
        <li style="left: 301px;"><a style="background-image: url("images/middle3.jpg"); width: 78px; height: 103px;" class="replace rollover" title="Middle 3" href="">Middle 3</a></li>
    </ul>
    <ul class="thumbnail_list noMouseOut front" style="width: 480px; left: 230px;">
        <li style="left: -25px;"><a style="background-image: url("images/front1.jpg"); width: 51px; height: 74px;" class="replace rollover" title="Front 1" href="">Front 1</a></li>
        <li style="left: 135px;"><a style="background-image: url("images/front2.jpg"); width: 51px; height: 65px;" class="replace rollover" title="Front 2" href="">Front 2</a></li>
    </ul>
</div>

the css is as follows:

#slideshow_menu ul.thumbnail_list   {
    position: relative;
    display: inline-block;
    float: left;
    padding: 0px;
    margin: 0px;
    list-style: none;
    height: 128px;
    }

#slideshow_menu ul.thumbnail_list li    {
    float:left;
    margin: 0px 2px;
    }

#slideshow_menu ul.thumbnail_list li a  {
    display: block;
    }


#slideshow_menu ul.back, #slideshow_menu ul.middle, #slideshow_menu ul.front {
    position: absolute;
    bottom: 0px;
    height: 1%;
    }

#slideshow_menu ul.back li  {
    position:absolute;
    bottom: 0px;
    }

#slideshow_menu ul.back li a {
    height: auto;
    display: block;
    z-index: 20;
    position: relative;
    }

#slideshow_menu ul.middle li {
    position:absolute;
    bottom: 0px;
    }

#slideshow_menu ul.middle li a {
    height: auto;
    display: block;
    z-index: 30;
    position: relative;
    }

#slideshow_menu ul.front li {
    position:absolute;
    bottom: 0px;
    }

#slideshow_menu ul.front li a {
    height: auto;
    display: block;
    z-index: 40;
    position: relative;
    }

#slideshow_menu ul.thumbnail_list li a:hover {
    z-index: 80;
    }

Any help you guys can give me would be greatly received.

Answer 1

The IE compares the indexes of the elements on the same DOM level. The easiest way (and the only one I can think about now – and yes… IE 6/7 z-index has some issues) to achieve what you want is to rethink that with all li in the same ul. It shouldn’t get you in too much trouble and solves the problem.