Empty anchor text not clickable in IE browsers CSS tricks

Posted by Damodar Bashyal on May 08, 2012


As always I find something new issue in Internet Explorer related to css and functionality. This time it was anchor text which displays as block but isn't clickable. I replaced the empty space ( ) with some text then found that only the area text covers was actually clickable.

After clicking through few sites from google search result, I found one cool trick which solves this issue. and it is: background-image:url(about:blank);

This is how I had in styles.css stylesheet file:

#slide_content ul li a {
    bottom: 0;
    display: block;
    height: 305px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 345px;
    z-index: 2;

I added below in IE specific stylesheet file (styles-ie.css):

#slide_content ul li a {

So that solved the issues that was with IE browsers version IE7 and IE8. Didn't tested in IE6.

Some other tricks that I didn't need to apply but found and could be used were: (none tested from below)

#slide_content ul li a {
    background:url(transparent-image.png) no-repeat;


#slide_content ul li a {
    background-color: white;
    filter: alpha(opacity=0);

or, use exact size transparent image inside anchor like this:

<a href="#fix">
     <img src="transparent-image.gif" style="width: 345px; height: 305px"/>

Finally, one more css trick:

#slide_content ul li a {
    zoom: 1;
    position: relative;
not published on website

QR Code: Empty anchor text not clickable in IE browsers CSS tricks