IE PNG Alpha Fix v1.0 RC4

What is it?

As you are no doubt aware, IE/Windows has very poor PNG support with regards to transparency. That's where this script fits in. It's an IE5.5+ 'behaviour' that you can upload, place one line in your CSS file, and forget. The HTC file will then automatically add near-native PNG support to IMG elements and (unlike many other PNG fix scripts) also supports any element with a "background-image:" CSS property, with no alterations to the page HTML!

You can even change IMG SRC or backgroundImage url() after runtime exactly as you would normally, and the script will handle any changes to the transparency filter automatically, disabling and enabling as required. See below for a demo.

License:

IE5.5+ PNG Alpha Fix v1.0RC4

(c) 2004-2005 Angus Turnbull http://www.twinhelix.com

This is licensed under the CC-GNU LGPL, version 2.1 or later.

If you want to link my site or make a donation, you're more than welcome :).

Tech Specs

IE5.5+ includes support for an 'AlphaImageLoader' filter, that can take an element on the page and insert a correctly-rendered PNG image inbetween the element's content and background. This script automatically scans all IMG SRCs and element backgroundImages for .PNG files, and if it finds them, it removes the regular image and substitutes this filter in place. See the source if you want, but I've coded it quite compactly to keep download time down to a minimum.

Usage Notes

It's essentially automatic, see the source of this page for the line of CSS you need. The only other thing is that it needs a blank .GIF file uploaded to the server, and you have to set the 'blankImg' variable in the HTC file to point to this GIF, otherwise you'll get the "broken image" marker with your PNGs.

Known Issues

Tell me about them as you encounter them :). Currently I can only think of these:

• Can't help IE versions prior to 5.5, sorry.
• Users can't right-click-save processed PNG images, they'll save the blank GIF file if they try that. In some cases this might be a feature, not a bug...
• The script detects the ".png" extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere.
• It's most reliable on elements with non-'auto' dimensions set. So, give images and other elements width/height values; '100%', '10em' and '200px' and so on are all OK.
• Background PNG images can't be tiled. This is a limitation of the IE filter.
• Similarly, padding and borders don't indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
• There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.

Demo:

REGULAR IMAGE TAG: gif | png

 

BACKGROUND IMAGE: gif | png

 

Div Content