IE: Only part of an anchor is clickable

Question

I want to have an anchor with a specific 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

Answer 1

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

Answer 2

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.

Answer 3

Any image placed in the anchor background, and then positioned out of sight will fix your problem for IE6 and IE7. You need not have an image the full size of the anchor as suggested.

This means you can use a sprite or other image that is already being loaded on the page to save another call to your server.

<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a>

Answer 4

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 5

another way of handling this issue is a little "hack/workaround", when the block element got a background-color everything is fine, as you aspect it. make use of something like this:

a {
  ..
  background-color: white;
  opacity: 0;
  filter: alpha(opacity=0);
  ..
}