IE CSS: Link under transparent box is clickable

Question

I have a link that for a couple of reasons I'm disabling by displaying a transparent div on top of it. This works on FF and Chrome just fine, but on IE the link is still clickable. If I add a background color to the div (other than transparent) then the link is not clickable as it should be.

Any ideas on how to achieve this?

here's an example: http://jsfiddle.net/GdEak/7/

<div id=container>
    <div class='disabled'></div>
    <a href="#">Some link</a>
</div>

CSS:

#container{
  position:relative;
}
.disabled{
  width:200px;
  height:30px;
  position:absolute;
  top:0;
  left:0;
}
a{
  display:inline-block;
  width:200px;
  height:30px;
}

Thanks!

Why no just do something like `onclick="return false;"` instead? — Andreas Hagen, Mar 03 '13 at 18:32

My Head Hurts · Accepted Answer · 2013-04-13T09:15:01.337

Internet Explorer does not play well with "empty" elements. By having no background and no content, IE treats the element as if it was not there so you are still able to interact with whatever is stacked below.

To get around this, you can use a transparent png for the background instead:

background: url(/images/transparent.png) repeat scroll 0 0 transparent;

A question on usability though - should the link still be there, or look the same, if it is not clickable? I'd be concerned the page hadn't loaded properly if I was clicking on what I thought was a link and it wasn't working.

Edit

If, for some reason, you are against creating an image specifically for this solution, you can also use:

background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌AA7");

This will use a data uri to fill the background with a transparent gif and is supported as far back as IE8.

score 1 · Answer 2 · answered Feb 14 '15 at 04:16

1

My head hurts' answer above works but throws errors in newer browsers. This similar line does not:

background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

answered Feb 14 '15 at 04:16

Saeven

2,280
1
20
33

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

You can disable the link by simply adding the pointer-events: none style to your anchor element. This however isn't fully supported by IE either, more info on this here.

You can also just add an event handler to the anchor using javascript and returning false; using jQuery this would look like this:

$('a').click(function (e) {return false});

edited May 23 '17 at 12:31

Community

1
1

answered Mar 03 '13 at 18:37

user2129447

61
3

IE CSS: Link under transparent box is clickable

3 Answers3

Edit