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!

Answer 1

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.

Answer 2

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