Z-index bug in IE6/IE7

Question

Take a look at the following website: http://driz.co.uk/mars/index.html

If you look at the jQuery slider thingy at the bottom right in IE6/IE7 you will notice that the orange arrows appear behind the white gradient overlays even though the z-index of the arrows is set to higher values than that of the overlays.

It works fine in all the other browsers I've tested it on, including IE8 just 7 and 6 display the indexing wrong. Any ideas? Need to get this project out asap. Thanks.

Answer 1

This is a documented bug with IE6. Quarksmode.org has a article on it. http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

The above article does not contain a workaround but in the comments a fellow mentioned that giving the parent element a higher z-index actual fixes the bug. Don’t ask me why this works but it does!

<div style="z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        <a href="#">Page</a>
        ...
    </div>
</div>
<img style="position:absolute" src="myimage.png" />