CODEWITHSUNDEEP
htmlcssinternet-explorer
marcgg
marcgg

Reputation: 66436

IE: Only part of an anchor is clickable

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

Upvotes: 12

Views: 8377

Answers (5)

user769096
user769096

Reputation:

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);
  ..
}

Upvotes: 18

Matt Derrick
Matt Derrick

Reputation: 5724

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>

Upvotes: 2

Matt Bridges
Matt Bridges

Reputation: 49385

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>

Upvotes: 15

William Edmondson
William Edmondson

Reputation: 3637

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.

Upvotes: 3

Zack Marrapese
Zack Marrapese

Reputation: 12080

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

Upvotes: 0

Related Questions