In IE only text part of link is clickable

Question

I just noticed that in IE9 and IE8 (not in IE7) the padding around my links is not being considered part of the link (it's not clickable and my hover effects aren't being applied when it's hovered over). Only the text part of the link is working.

I tried giving the element a background color but that didn't fix it.

Has anyone seen this before?

SOLVED: Wrote a huge edit to my question and in the process figured it out myself. I had a negative z-index on the body, which I definitely didn't know would cause this but apparently it does. Here's the jsfiddle: http://jsfiddle.net/CEbMe/ which shows the problem in IE9 and IE8

Can you setup a specific demo with your issue (jsBin, jsFiddle) or just paste some code? — Roko C. Buljan, Mar 10 '12 at 21:55
I just tested on IE 9, and it has no difficulties in making the entire link, including padding, clickable. So there’s something special involved in your code if things don’t work that way. — Jukka K. Korpela, Mar 10 '12 at 22:08
Thanks guys! I just accepted some answers, sorry should have gotten on that earlier... — Sabrina Leggett, Mar 10 '12 at 23:40

score 1 · Answer 1 · edited Sep 03 '13 at 02:46

1

Try adding:

<style>
  a { display: inline-block; padding: 0 50px; background: yellow; }
</style>
<p>This is a <a href="#">link</a> with some text around it</p>

edited Sep 03 '13 at 02:46

Dennis Hackethal

13,662
12
66
115

answered Apr 18 '12 at 08:31

score 1 · Answer 2 · answered Dec 02 '14 at 14:48

None of the suggested answers fixed it for me, and I spent a few hours finding the answer:

http://haslayout.net/css/Partial-Click-Bug-v2

background-image: url(#);

fixes it. I imagine this would probably do the job too:

background-color: transparent;

In IE only text part of link is clickable

2 Answers2