A friend asked me about getting PNG alpha transparency to work in Internet Explorer.
How it works (the basic idea):
- It replaces it with a span (or single transparent pixel gif in the old cases) stretched to the dimensions of the images
- It applies the ActiveX filter, built into Exploder 5.5 and 6.0 to the original png
Some important notes:
- IE 7 doesn’t need this as it is PNG transparency built in. There is a small wrapper HTML comment thing that takes this into account (as well as providing other subtle benefits).
- My friend might want to use the older version of code that uses a single transparent GIF so it can replace form images and mouseovers. Luckily that stuff is explained fully here.
- This does not work on background PNGs because the filter won’t allow for repeats or cropped images. For Plaxo’s new rounded rectangles and buttons, I created a separate set of CSS rules that use a single layer transparent GIF instead of PNG. When it detects IE5.5 or 6, it changes the class to use the new rules. You lose the drop shadow
- If you are using heavily ajax’d site, you’ll need to run the correctPNG() function after injecting anything into the DOM.
Some improvements I noticed between this version and the one I wrote for Plaxo:
- It doesn’t always use a single pixel gif. The deal here is if you don’t have a single pixel gif in the location referenced, you get nothing at all!
- You won’t see a “blink” when the original PNGs load and then are replaced by a filter.