How to make an empty anchor tag clickable in IE7?

Question

Hi- 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.

Answer 1

Make a DIV clickable instead. If it's calling JavaScript, you don't need an anchor tag at all.

You can absolutely position if if needed.

<div onclick="alert('moo')" style="height;100px;width:100px;cursor:pointer"></div>

Answer 2

It looks like you've found a rendering problem with IE. Your hack is a reasonable one and seems to work OK, with one exception: the browser will actually make an HTTP request each time to resolve the bogus URL, which will hurt performance of your page. If you do go with this workaround, I'd suggest using this, which will not make an HTTP request:

background-image:url(about:blank);

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

Answer 3

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.

Answer 4

For the record, this seems to also be happening with IE8. I was having this same problem and this helped me a lot - thank you!!