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.