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

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

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.

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

I've had an issue in IE9 and below lately where the clickable area around the anchor tag did not work. None of the typical resolutions worked for me. What I found worked was adding this style to the html element:

html {
position:relative;
z-index:-1001;
}

The z-index ordering is different in IE than in the other browsers.