Oh Internet Explorer, how do I hate thee, let me count the ways.
Actually, I’ve already wasted enough of my life hunting down bugs caused by your horrendous rendering engine that counting out my hate for you will only waste more.
My latest run in involves some “buttons” that actually contain a large amount of styled text.
<div class="button"> <h2>I am a heading</h2> <p>This is some subtext to the heading and is in a paragraph element</p> <div class="grid-link"> <a href="#">Here's some link text that is hidden with CSS</a> </div> </div>
Now that may look a little overly complicated for what I’m trying to do but it is semantically correct. Many is the time I have seen people just do something like the following.
<a href="#"> <h2>Blah</h2> <p>Blah blah</p> </a>
The problem here is that the heading and paragraph elements are block level elements but an anchor is an inline element. A block level element can contain other block level elements and inline elements, but an inline element cannot contain a block element.
Anyway, my solution allows me to keep heading and paragraph elements in this clickable button. I used CSS to absolutely position the anchor element above the rest of the button text with z-index, fixed width and height, and a display setting of block.
Here’s some sample CSS.
.button {
position: relative;
width: 200px;
height: 100px;
background: #ddd;
}
.button:hover {
background: #ccc;
}
.grid-link a {
text-indent: -9999px;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
}
Internet Explorer problem
No, this wasn’t just some lowly IE6 or crazy IE7 issue, this issue appears to affect IE right up to IE10. Microsoft obviously don’t consider this an issue.
So, Internet Explorer ignores the fact that I have declared my .grid-link anchor as a block positioned over the entire button text. As a result my anchor only works when there is no text displayed underneath.
If you don’t follow me, try this live example: http://jsfiddle.net/gzGWv/
See how in every normal sane browser you can hover over the block and your cursor remains a ‘pointer’ type indicating it’s clickable, but in any version of Internet Explorer it returns to being a text cursor when you hover over the text and you cannot click the link.
Internet Explorer Fix
After much hair-tearing and wading through dozens of similar issues I found the fix was relatively simple.
Internet Explorer doesn’t like these sort of ’empty’ elements (even though the element is actually not empty) and requires a transparent background image to give it some substance. I just needed to add the following to my anchor element.
background: transparent url('https://alex.leonard.ie/misc-images/transparent.png') repeat 0 0;
You can see how it now works in all versions of IE: http://jsfiddle.net/5GVMr/1/
I write this in the hope that it helps someone else who encounters the same problem.
Comments