IE z-index anchor link bug

I was working on a client’s website and I discovered this strange bug in Internet Explorer that I am unable to reproduce ( too lazy to go through all the effort ), but I swear, it’s the strangest bug I have ever seen.

Basically, I have a bunch of links that are set as ‘display:block’ and they sit on top of an image. The links are ‘display: block’ because I am using the links to make certain areas of the image into clickable links.

Of course this works fine in Firefox, but in IE, both 6 and 7, the stupid links kept disappearing behind the image. Regardless of what z-index I give it, or how I arrange the order of the HTML, the links kept disappearing behind the image ( I knew this because I examined the DOM with the web-developer toolbar and I found the links behind the image. )

After f*ck1ng around with it for like an hour and being absolutely bewildered, I applied a ‘background: red’ ( or an an image ) to the links, and wahla, they appear correctly in IE. Freaking amazing.

The reason I have never encountered this problem in the past is because I usually have a background associated with my links. This is the first time I had a background-less, text-less, link element.

Anyways, this is a very ill-prepared blog post, but I hope it will help someone running around in circles like I was.

  • I too was messing around with this for hours, but you’ve given me a push in the right direction. Setting background: transparent; doesn’t work, but if you use a non-existent image, it brings it to the front – background(../images/non-existent.gif); and your link will then show in front of the image.

  • CJ

    Thank you! I had the same problem and added a transparent gif to the background of the link and it did the trick.

  • Hank_chizl_jaw

    Best post ever! Thank you mate, you’ve saved me hours of hell!!