hasLayout.net

Affected Versions

This bug affects: IE8, IE7

Symptoms

transparent areas of background image on links is not clickable when `filter` is used to fix PNG transparency

Date of the Tutorial

Sun Jul 19 15:03:44 2009

Description

Problem: we've used a transparent PNG image as a background for our link and used IE's filter to fix alpha-transparency in IE. What happens in IE? Transparent areas of the image are not clickable. Let's take a look at the demo:

Demo

HTML Code:

<div><a href="#">Lorem Ipsum</a></div>

CSS Code:

a {
    display: block;
    background: url(ring.png) no-repeat;
    width: 100px; height: 100px;
    text-indent: -999px;
}

Conditional Comments:

<!--[if IE]>
    <style type="text/css">
        a {
            background: none;
            cursor: pointer;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ring.png",sizingMethod="scale");
        }
    </style>
<![endif]-->

So what do we have here... a link (' element"><a>) styled with display: block and its background is set to a PNG image of the black ring; everything that's not a ring is transparent in the image. We used IE-only filter "property" to fix the PNG transparency in IE. Problem? In IE transparent areas of the ring are not clickable.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Conditional Comments Solutions)

Date of the Solution

Sun Jul 19 15:17:23 2009

Fixed Versions

all of the affected

Description

I'll tell you a little secret: the bug fixes itself if we set background on our link... but, we CAN'T, can we? Let's glance at the demo first:

HTML Code:

<div><a href="#">Lorem Ipsum</a></div>

CSS Code:

a {
    display: block;
    background: url(ring.png) no-repeat;
    width: 100px; height: 100px;
    text-indent: -999px;
}

Conditional Comments:

<!--[if IE]>
    <style type="text/css">
        a {
            background: url(#); /* or point to a transparent gif. EDIT: see comments */
            cursor: pointer;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ring.png",sizingMethod="scale");
        }
    </style>
<![endif]-->

Viola! What a cheat! We've set the background for IE to be an "image" but for the url() we simply put a hash-sign. EDIT: see user comments about usage of about:blank. What this actually does is sets the currently loaded page as the url() for the background - yes, there will be an extra HTTP request due to this, but in my opinion it's really nothing to worry about because the page would be cached by then. IE works in mysterious ways.. and this is one of them.

Update: as one of the commenters pointed out. This extra HTTP request may affect the page click rate or whatever else. If this is your concern, instead of the hash sign you could point the background to your CSS file (it would be cached too) or if this feels dirty, create a transparent GIF image and set background to it. I also would like to add that if the solution is implemented using conditional comments, the extra requests would happen only in IE browsers.