Dan Price’s blog
Weblog of a cyber-geek

I’ve been searching around for a long time to find a solution to IE6’s stupid lack of support for transparent PNGs. I read numerous tutorials to find hacks for IE6, with methods including Javascript, HTC files and the official Microsoft hack. However, I repeatedly disappointingly found I could get none of these working (I’m aware some people did get them to work, but I couldn’t).

Then thanks to a genius on the Webmaster-Talk forums, Adam Senour, I found a fantastic way to get these working on my site. The solution is actually very simply, is purely CSS based and doesn’t involve making any new images! Here we go:

1) Rather than using the img tag in your HTML file, make an empty div tag and give it an ID. For this tutorial, I’ll call it “logo”.

2) In your main CSS file that all browsers see, add the following CSS:

#logo {
background: url(”http://www.yoursite.com/logo.png”) top left no-repeat;
width: 100px;
height: 100px;
float: left;

3) In your special IE or IE6 CSS, add the following lines of CSS (this is the hack for IE6):

#logo {background: none;
filter:progid:DXIMageTransform.Microsoft.AlphaImageLoader (src=”http://www.yourwebsite.com/logo.png”;}

Bada Bing Bada Boom, we’re done!

All this actually does is display the image as a background for the empty div for all browsers. The IE6 CSS then removes any background, then adds the image in the div again. It means that browsers like Firefox and IE7 that support transparent PNGs get them, while IE6 receives a transparent PNG through a hack. There is no need for any other files and it just works!

Credit for this goes to Adam Senour, a web designer from Canada who got this working for me

This entry was posted on Thursday, October 11th, 2007 at 2:23 pm under Site development, Tutorials, Web geekery. You can follow any responses to this entry through the RSS feed. You can also leave a response