PNG’s in IE6 with NO extra code

Yet another little web design tid bit for you all.

I can’t remember where I found this, but this helped on one site so far. Ever want to use the png format because of the awesome transparency ability, but hate IE6 because it won’t render it? This will allow you to use a PNG in IE6 without the use of the iepngfix javascript files or any other code for that matter. Be aware that you need Fireworks for this to work, because you cannot change the png to Alpha Transparency in Photoshop. Sucks, I know, but for those that have both, ya.

I’ve used it successfully on photos and things with a clear and defined shape to them. If you are doing this with a text image because of a cool font, then be careful with dropshadows and glows. It won’t be perfect, but the quality will crush the gif format that you would be usually stuck with. It also gets you away from using flash for silly things.

1) Save the file as a PNG-24 in Photoshop
2) Open it in Fireworks
3) Change the PNG-32 to PNG-8
4) Change No Transparency to Alpha Transparency
5) Click Rebuild
6) Export

You would of course still have the original png to use in the CSS for the modern browsers that work fine with them. So your CSS would look like this:

#divName {
background-image: url(images/imageName.png); /*png-24 version*/
_background-image: url(images/imageNameIE6.png); /*png-8 version for IE6 only */
}

God I can’t wait for IE6 to go away.

Leave a Reply