This bug affects: IE8, IE7, IE6
transparent areas of background image on links is not clickable when `filter` is used to fix PNG transparency
Sun Jul 19 15:03:44 2009
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:
Due to the nature of the bug, demo is shown on a separate page
<div><a href="#">Lorem Ipsum</a></div>
a { display: block; background: url(ring.png) no-repeat; width: 100px; height: 100px; text-indent: -999px; }
<!--[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 (<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.
Below are solutions for the above bug ordered by the solution type.
Sun Jul 19 15:17:23 2009
all of the affected
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:
Due to the nature of the bug, demo is shown on a separate page
<div><a href="#">Lorem Ipsum</a></div>
a { display: block; background: url(ring.png) no-repeat; width: 100px; height: 100px; text-indent: -999px; }
<!--[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.
Thu Oct 13 18:19:30 2011
Brilliant! Thanks for sharing! In my case, since I always seem to have one of them lying around in my img folder anyways, a simple blank.gif worked perfect!
Thu Jul 14 20:29:20 2011
I believe that would cause a validation error, hence the hash.
Thu Jul 14 15:34:57 2011
This also seems to work just by setting the parameter as:
background: url();
...that is, with the hash (#) - I don't know if this will also cause an extra HTTP request or not, but it seems to be more friendly to IE9 than the transparent gif solution.
Mon Jan 3 06:32:35 2011
"background: url(#);" is a nice trick :)
Wed Dec 2 07:07:34 2009
You are suffering from some other bug; likely to do with z-index
Wed Dec 2 00:05:48 2009
i have one issue with this i have applied css for png image in ie6 in seprate file and then i call that file using Conditional Comment in my main page but issue is that i applying the png image not to the a tag but applying to a div which all my anchor tag so i have added background:url(#); in that class but the links are not click able and i try to make new gif transparency image but i not getting same effect what i got in png format so can u pls help me with this issue it's very for me to know...I have adding my css code u just have a look on it
* html img,
* html .png{
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "http://komodomedia.com/wp-content/uploads/2007/11/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
background: url(#);
}
* html .png a{
background: url(#);
/* or point to a transparent gif. EDIT: see comments */
cursor: pointer;
}
I have tried using the both cases above it showing transparency of the image but my links are not click able so pls have look and pls give some guide as soon as possible....my another email id is sonu.bimra@gmail.com
Thu Nov 12 16:44:31 2009
Hey! Thanks for that find, I checked in Firefox and about:blank doesn't make extra requests (as opposed to a hash, that does). Neat!
I've updated the solution to include this method.
Thu Nov 12 07:51:46 2009
I tried using about:blank instead of the hash, and it worked in IE8 (both IE7 and IE8 mode). I haven't checked if IE makes any requests, but it should be safe.
Tue Aug 18 06:19:28 2009
Thanks for pointing that out, I have updated the tut to mention this fact.
The hash sign was just a no-brainer way to add a fake background.
If someone is "tracking" your site, you can simply point that background to your CSS file, i.e. background: url(/main.css); or create a transparent gif image and stick it in there: background: url(/gif.gif);
Moreover, if you implemented the fix using conditional comments, the extra HTTP request will happen only for IE browsers, sort of like a "stupid browser tax".
Cheers
Tue Aug 18 01:51:05 2009
I hate to say it, but if your site it tracked by comScore and you're making an extra page request due to this hash-sign you'll be dinged for it. Sorry.
If I find a solution for this I'll post back. Best to find a web standards way to fix this even if using a MSFT extension.
If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.
Alternatively, purchase my book: 
