12

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.

2
  • In front of a certain area of the page? If you want a certain area of the page to be clickable, you are going about this all wrong by using an unsemantic anchor tag. Jul 2, 2009 at 18:44
  • This is a hack for a legacy website...
    – marcgg
    Jul 2, 2009 at 21:01

5 Answers 5

18

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);
  ..
}
2
  • 1
    Even IE9 has the same issue and fixed it using background-color
    – manikanta
    Mar 6, 2012 at 11:25
  • 1
    Probably, the most elegant solution.
    – bancer
    Oct 12, 2012 at 12:37
15

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>
2
  • 3
    I didn't used exactly your code, I did: <a href="/" style="width:370px;height:80px;display:block;position:absolute;z-index:9999;background:url(/images/empty.gif);"></a>
    – marcgg
    Jul 2, 2009 at 17:47
  • This fix saved my skin--thank you. IE10 still has this issue when combined with z-index weirdness.
    – Alkanshel
    May 2, 2014 at 20:41
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.

2
  • 1
    had the same problem, added a z-index to my element and fixed the problem. thx Oct 26, 2011 at 9:19
  • was same for me ! Aug 14, 2020 at 13:40
2

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>
0

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

1
  • I just tried putting a z-index of 9999 it didn't change a thing. I also checked if there was some other div over it, but it doesn't look like it.
    – marcgg
    Jul 2, 2009 at 17:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.