@madpilot makes

First of all, I know that IE 7 supports transparent PNGs out of the box, but it would seem the uptake isn’t as grand as everyone was hoping – out of readers of Bloggy Hell this month, 23% viewed with IE 6 and 2% viewed with IE 7 and the 88 Miles statistics show something pretty similar, so IE 6 support is still a requirement for most web developers.

Background:

PNGs support 128bit transparency, meaning you can using many levels of opaqueness, avoiding ugly “jaggies” that are so common with GIF images. GIFs only support 1 bit, which means only one colour can be transparent – too bad if you are anti-aliasing the image.

However, Internet Explorer 6 doesn’t support transparency without some IE only hacks. Most versions of the hack presented use inline CSS styles or JavaScript, which I always found as an unacceptable solution. The following works with foreground and background images (mostly), doesn’t use JavaScript, allows you to separate you presentation (CSS), behaviour (JavaScript) and content layers (HTML) and is standards compliant!.

1. Assign a class or id name to all the PNG images you need to convert.

<img alt="This image should be transparent" class="my_png" src="my_png.png">

2. Create a separate IE only stylesheet.

img.my_png {
    width: 16px;
    height: 16px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_png.png');
    padding-left: 16px;
}

The crazy, non-standard filter command does the magic – it tells IE that the image needs to be made transparent. There are a couple of notes here though, you MUST include a width and height that matches the source image. It doesn’t matter if you include it in the html tag or the CSS – I put it in the CSS because that is where I think it belongs. The padding-left must be the same as the width – this is REALLY important. What this hack does is overlay the “new” png over the top of the old one, without using padding-left to push the old image out of the way, you would see the old image underneath the new image, rendering the effect useless. By moving it over out of view, you will only be able to see the tranparent PNG.

3. Drop in the IE only conditional statement

<!--[if lt IE 7]>
<link href="ie.css" media="screen" rel="Stylesheet" type="text/css"></link>
< ![endif]-->

This is pretty standard – ie.css is the stylesheet we just created.

As I mentioned at the beginning, this technique works for background images too, except for one small issue – if the element with the background image has text in it, the text disappears, because of the padding-left modifier. It is actually a really simple fix, just change the CSS to say the following:

img.my_png {
    width: 16px;
    height: 16px;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_png.png');
}

This will turn off the non-transparent background PNG and replace it with the transparent version. It won’t work with a repeating background image though, but hey, you can’t have it all. If you want to see this method in action, go to 88 Miles – all of the buttons use it.