IE9 Z-index stacking problem? Or something stranger?

Posted on 29th Mar 2012

I thought we were well beyond stacking issues in Internet Explorer, but it turns out that isn't the case.

Whilst building a gallery module on a recent site I noticed that IE9, unlike all other browsers, was 'ignoring' the z-index, or so I thought.

Here's a basic run-down of what I had.

<div id="gallery">
<div class="gallery-container"> <ul class="gallery-images"> <li class="current"> <h1>1980</h1> </li> <li> <img src="/images/gallery1.jpg" width="400" height="300" alt="gallery image 1"> </li> <li> <img src="/images/gallery2.jpg" width="400" height="300" alt="gallery image 2"> </li> <li> <img src="/images/gallery3.jpg" width="400" height="300" alt="gallery image 3"> </li> </ul> </div> <a href="#" title="Show previous image" class="gallery-prev gallery-nav"> <span class="sprite next-arrow"></span> </a> <a href="#" title="Show next image" class="gallery-next gallery-nav"> <span class="sprite prev-arrow"></span> </a> </div>

And for the CSS

#gallery {
position: relative; z-index: 3000; height: 560px; } .gallery-nav { height: 330px; width: 80px; display: block; position: absolute; left: 0; top: 0px; z-index: 1000; } .gallery-next { left: auto; right: 0; } .gallery-nav span { width: 80px; height: 330px; background: transparent; } .gallery-nav:hover span { background: url(/images/sprite.png) -341px 0; } .gallery-nav:hover .next-arrow { background-position: -420px 0; } .gallery-container { height: 330px; width: 940px; overflow: hidden; position: relative; z-index: 0; } .gallery-images { position: absolute; top: 0; left: 0; width: 4000px; z-index: 0; } .gallery-images li { float: left; margin: 0; }

Pretty straight forward. What I expected to happen was when I hovered over the right, or left hand side of the gallery, the next or previous navigation arrows would show up.

What actually happened was, well nothing. I thought it was a z-index issue as this sort of thing has been well documented in the past in previous versions of Internet Explorer. However after about 40 minutes trying to implement those workarounds, still nothing.

Eventually I stumbled across a forum post that provided a little extra insight.

The fix

From that forum post:

In IE the element with the link must have background in order to be click-able. Otherwise the mouse 'sees right through it'. Oddly though, we can give it a phony background image.

So if you need your link to have a transparent background but to still show it's contents when hovered you simply need to add a 'fake' background image to it. I just generated a 1px by 1px transparent GIF file and linked it up to the gallery navigation like so.

.gallery-nav { background: url(/images/fixer.gif); }

And that fixed it straight away. So it looks like a z-index bug, acts like a z-index bug, but isn't really a z-index bug.