How to make an empty anchor tag clickable in IE7?

Question

I need to make an area within a background image clickable to generate an event for JavaScript use. So, I created an anchor tag and inside that I inserted some relevant text between semantically meaningless tags which I then made hidden:

<a href="#"><i>foo</i></a>

Then I gave the anchor tag 'display:block' properties, width and height values, and absolutely positioned it where I needed it to be in relation to the background image. In Firefox this works nicely - I hover over and my cursor changes as expected - I've got something clickable. IE7 however, doesn't like the fact that the anchor tag is 'empty' and therefore doesn't treat it as clickable. So I added this to the anchor tag in css:

background:url(/no-image.jpg); 

...which seems to fool IE7 into assuming something is there. IE7 now treats the area as clickable, even if no background image actually exists for the anchor tag. But this seems like a bit of a hack to me and I'm wondering if there is a more elegant way to deal with this problem. Any ideas would be greatly appreciated. Thanks.

Solution 1

Get rid of the semantically meaningless tags and use normal CSS image replacement, instead.

<a href="#">foo</a>

And then the CSS:

a { 
    width:100px; 
    height:100px; 
    display:block; 
    text-indent:-9999px; 
    background:url(/img.png) no-repeat;
}

Add whatever positioning you need, and it should work just fine.

Solution 2

You've found a rendering problem with IE, and according to @Simon below the issue still exists at least through IE9.

Your background: hack will work, but the browser will make an HTTP request each time to resolve the bogus URL. This may hurt the performance of your page. To achieve the same result but not make an unnecessary HTTP request, I'd suggest using this URL instead:

background-image:url(about:blank);

about:blank is a special URL that browsers show as an empty page, so it won't affect how the element is displayed, but it also won't make any HTTP requests either.

BTW, the problem only happens when you have an absolutely or relatively-positioned A element (or an A element inside a positioned block). Regular non-positioned hyperlinks don't seem to have this problem under IE7.

Comments

[deluxe_247]

yeah, i think that would work, but one thing i should've mentioned earlier is that I would like to retain the anchor tag... there is the rub.

[deluxe_247]

do you mean use the anchor tag with a target="_blank" attribute?

[Justin Grant]

Nope. I mean don't use a real URL for your background-image that IE will have to fetch. Use about:blank in your CSS which is a special URL that doesn't cause an HTTP request. Your HTML is fine-- the problem is purely CSS-related

[AppleGrew]

This is what stackoverflow uses for its vote up and vote down arrows. :-)

[Hari Honor]

Some people are starting to discourage the use of it now in favour of the old image method: google.co.uk/search?q=stop+using+css+image+replacement+text

[Simon East]

Yeah, the issue seems to still exist as of IE 9. Your trick worked nicely, thanks!

[squarecandy]

That's pretty sweet. I was going to resort to the ancient 1px tranparent gif, but this seems better.

[mikkelz]

@JustinGrant You are my hero! Thank you. I encountered the same problem, but with a slightly different scenario. I was appending, via jQuery, anchor "buttons" (like hot-spots) in to a slider that didn't have any contents. Just absolutely positioned, display block with a width and height. However, in IE, they weren't rendering at all. Unless I added a border or specified a background colour which I didn't want. But your solution works perfectly!

[Jerry]

This is still an issue in IE10 in the second half of 2013.