Totally fired up about this one. I have not seen this Internet Explorer bug in a while so it was fun to fix. This absolute positioning error affects IE7 and IE8 for sure, and my guess is that it affects IE6 as well; and, we can and should all pray IE9 fixed this.
Basically the CSS bug it triggered when you have the following:
- Two HTML elements stacked on top of one another
- An empty link, or a link with its content indented off screen, with its
displayset toblock. - The other element being an image or some other element whose content display actually renders pixels such as text.
- The link is positioned (absolutely in most cases) on top. (z-index may be required if it’s positioned absolutely)
- The bottom element content overlaps the top link element. It seeps through.
What you get is an un-clickable link where the content and link overlap. You can also call this a CSS link overlay. And its not working in IE.
To hack it, you need to set the background color of the link. This will cause IE to render pixel content within the link. However, this will cover our content positioned behind the link. New problem created, old problem solved: the link is clickable now.
What to do about the new problem? How about setting the opacity of the link to 0 with CSS…
a {
display: block;
background: #FFF;
opacity:0;
filter:alpha(opacity=0)
}Shazam! That bad boy is clickable again. Happy birthday! Talk about a CSS IE hack.
