scruffian

Today I have spent a lot of time investigating a bug in Internet Explorer (it still seems to be there even in IE8). Basically I have an image, part of which needs to be a link, and I can’t use an image map, so I thought I would position the link over the top of the image and set the width/height of the link to match the area that I want the link in. Something like this:

<a href=”http://get.adobe.com/flashplayer/&#8221; style=”display:block;height:23px;position:absolute;right:88px;top:44px;width:164px;z-index:1;”><span style=”display: none;”>Click here to download the latest version of flash</span></a>

For accessibility reasons I put a span inside the image containing text to say what the link did, and then hid this with display: none. This should work fine. Indeed it did work fine in Firefox, but the problem was IE8 (and 7 and probably all of them). In fact this code works fine in IE when in isolation. However when on the page there was obviously some conflict with something else because for some reason IE was ignoring the display: block declaration on the link – if I allowed the text inside it to be displayed, then it worked like a link, but only as an inline one, not a block.

I fiddled around for a long time and was unable to find anyone else who has had this problem, or any good solution so in the end I resorted to setting a transparent background image on the link like this

<a href=”http://get.adobe.com/flashplayer/&#8221; style=”background: url(transparent.gif);display:block;height:23px;position:absolute;right:88px;top:44px;width:164px;z-index:1;”><span style=”display: none;”>Click here to download the latest version of flash</span></a>

Not very pretty I know but it does the job. Hopefully this helps someone out. If you can explain this bug I would love to hear from you!