Internet Explorer ignores display: block;

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!

Posted in CSS

One thought on “Internet Explorer ignores display: block;

  1. sounds technical, was talking to a mate the other day after i set his facebook and hotmail accounts out for him ( all free = free beers for me ) and when hearing him telling someone his email details started with http://www.blablabla@hotmail.com . I thought parents were the only people with no clue…

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s