IE Display:Block Link Interference Error

Issue: In IE, when using links with display:block overtop of images, the block setting disappears and only the link text is clickable.

There are a few CSS tricks running around these days to replace the old image maps (which are a big pain in the ass to write). My personal favorite is to write a text link, then hide the text, size it, and place it over the image-to-be-mapped. Then the html makes complete sense and you always know which link is which. And people without css can still navigate. Excellent all around.

I created the following ultra-simplified example of my image-map substitute below. The blue-bordered area is a relatively-positioned wrapper div. The image inside is absolutely-positioned, and the red-bordered link is relatively positioned on top. You could reverse this: I didn't see a difference in the results. The link is set to be a block (not inline) so it will fill the dimensions specified. A span surrounds the text inside the link and that span is set display:none.

Sample #1: (initial attempt)

This works in all browsers but IE, where the image covers up the link. At first I thought this was a z-index issue (which IE has some well-documented issues with). But after exploring that for several hours, I found that this was not the case. When I set the background color of the link, it shows above the image (proving it is above the image in z-index).

Sample #2: (with background color)

I thought this might be one of those IE things where you can fix the element by setting width or display:inline-block. But not the case. Nothing helped but background-color. Then I let the text become visible again to see what would happen. This is really entertaining.

Sample #3: (showing text)

If you hover (in IE) over the text, it becomes immediately apparent that the block status of the link is being ignored - you can only click on the text area of the link. But this is only true in the area where the lower-level image is visible. So basically, IE will only see visible stuff inside the link (background-color or link text) and ignores the link block otherwise. Joy. So it was a quick matter to find an invisible element that IE sees as visible in order to overcome this problem: a blank gif! It doesn't matter if you use it as a background image or an inline-element set to the right size: IE sees this as a link object and shows the link. Yay!

Fix #4: (fixed - with blank background image in CSS) Fix #5: (fixed, with inline blank image)

If you would like to see these 5 simplified examples with no other interfering html see the IE Display Block Link Test Page.