IE: Only part of an anchor clickable

Question

I want to have a anchor with a specifc height and width. There is no text on it since it's meant to be put in front of a certain area of the page.

Here is the code:

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"></a>

It's working fine in everything but IE6 and IE7. If I add a border, I can see that the anchor has the correct size, but if I try to click it, only the top part will be clickable.

I don't know why it's doing this. I tried adding a onclick even with an alert, and same thing, it's impossible to click on the bottom part of the anchor.

It's really weird, did this happen to anyone before? Anything will help.

Answer 1

it could be that this is a z-index issue with another div/span/etc.

Answer 2

In previous versions of IE, its not possible to register the onclick event on block level elements themselves. Instead, IE applies the onclick to the text or inline elements inside the block.

I've found that putting a transparent image inside the anchor that is the same size as the full anchor will register the onclick.

<a href="/" style="width:370px;height:80px;display:block;position:absolute;">
    <img src="Transparent.gif" style="width: 370px; height: 80px"/>
</a>

Answer 3

Since this link is absolutely positioned it sounds to me like there is another block partially overlapping it thus hiding half of it from the click event.