IE6 Transparency fix - what works?
11 May 2010 @ 02.54
I have tried several 'fixes' for the old transparent png bug in IE 5 and 6. However, while they worked for the specific versions, the remedy ended up hiding the main background image within the wrapper div as well. While others hid all graphics from other browsers (Firefox and Safari).
My site is in Concrete 5 so the remedy needs to work within that framework and be a consistent fix across all browsers.
The best solution is to use PNG-8 instead of PNG-32. PNG-8 supports full alpha-transparency, and degrades to binary ("on / off") transparency in IE6. This provides an acceptable fall-back in most use cases (it doesn't work if the whole image is slightly transparent, for instance).
Adobe Fireworks can save alpha-transparent PNG-8. Most graphics software cannot, unfortunately.
If you can't save alpha-transparent PNG-8, then your best option is to fork your code, sending IE6 a binary-transparent PNG-8 instead (or a GIF). The CSS would look like this:
Except for DD_BelatedPNG which uses Microsoft's implementation of VML (Vector Markup Language).
Originally Posted by iandevlin
If you're dead-set on alpha-transparency in IE6, then that may be a better approach than AlphaImageLoader.
In terms of performance, it's an unknown quantity: it hasn't been subjected to the same scrutiny as AlphaImageLoader. It may suffer similar shortcomings, since CSS behaviours in general perform badly.
An unknown quantity is better than a known evil. However, I would still advise people to use PNG-8 if possible, as this removes the need for any hacks, and also keeps file sizes down (PNG-32 files tend to be large).
Last edited by Mike Hopley; 11 Jul 2010 at @ 16.16.