Hidden clickable link doesn't work without background color in IE

Question

I have this link:

<a href="/" style="position: absolute; left: 40px; top: 50px; height: 60px; width: 120px;"> </a>

Which works fine in most browsers, except for IE. I tested it in IE8.

When I add a background color, it does work however. But this is not possible on my design. How do I fix this link to be clickable?

<a href="/" style="background-color: red; position: absolute; left: 40px; top: 50px; height: 60px; width: 120px;"> </a>

edit: I also tested with transparant background, doesn't work either.

not a good suggestion, once try `background-color: transparent` :) — Mr_Green, Jun 14 '13 at 14:39
@RenePot try background: none. transparent is by default. (my mistake) — Mr_Green, Jun 14 '13 at 14:42
possible dublicate: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie — kleinfreund, Jun 14 '13 at 14:51
It makes me confused, your link, as it is, is clickable in an genuine IE8 .? What kind of IE8 are you using ? — G-Cyrillus, Jun 14 '13 at 15:11

G-Cyrillus · Accepted Answer · 2013-06-14T14:56:06.213

2

to avoid your mouse to click through your link, you understood you needed a background-color since there's no content at all.
background:rgba(0,0,0,0.01); just does fine, it has a background and still you don't see it.

In fact your link is like it doesn't exist, no text, no title , no nothing but CSS.
Easter egg :) ?

Unless you have really good reason, it is not a good practice to have such an inconsistant link .

Actually, In a real IE8 (win XP) your empty link is clikable ! http://liveweave.com/XvhkJ6 made and tested from a genuine IE8. :)

edited Jun 14 '13 at 14:56

answered Jun 14 '13 at 14:47

G-Cyrillus

101,410
14
105
129

oups, let me start an IE8 to check it takes rgba .. all the sudden i have a doubt. – G-Cyrillus Jun 14 '13 at 14:50
right, not rgba avalaible. :) but link is clikable just like this. – G-Cyrillus Jun 14 '13 at 15:00

score 0 · Answer 2 · answered Jun 14 '13 at 14:39

0

Add a transparent gif on a background. It is a known bug in IE.

answered Jun 14 '13 at 14:39

claustrofob

5,448
2
19
22

score -2 · Answer 3 · answered Jun 14 '13 at 14:39

-2

You can use background-color: none

answered Jun 14 '13 at 14:39

Zero Fiber

4,417
2
23
34

-1: `none` is not a valid value for `background-color`. `inherit` and `transparent` are. – kleinfreund Jun 14 '13 at 14:56
sorry, i saw the first comment on this post http://stackoverflow.com/questions/8739665/is-background-colornone-valid-css – Zero Fiber Jun 14 '13 at 14:57

Hidden clickable link doesn't work without background color in IE

3 Answers3