Thread: IE6 Transparency fix - what works?

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.

Any up for the challenge?

It never rains but it pours.

All the fixes use the AlphaImageLoader filter, which should be avoided for performance reasons.

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:

Code:

#transparent-thing {
background: url("png32-for-good-browsers.png");
_background: url("binary-transparent-for-ie6.png"); /* IE6 only */
}

Thanks Mike.

Fantastic explanation. I have Fireworks in my box of tricks so I'll give it a go!

Glad to help.

I know I'm late to this but would still like to let people be aware of this.

All the fixes use the AlphaImageLoader filter, which should be avoided for performance reasons.

Originally Posted by Mike Hopley

This is true. Except for DD_BelatedPNG which uses Microsoft's implementation of VML (Vector Markup Language).

I use this and find it works a treat.

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).

Oh I completely agree with you regarding PNG-8, I wrote a blog post about PNG-8 back in September.

I've used DD_belatedPNG on a large scale .NET project (main customer uses IE6) and it works just fine so far.

It's great that Fireworks allows you to save in png-8. I just wanted to add that Photoshop also allows to save images in png-8 when you optimize the images.

It's great that Fireworks allows you to save in png-8. I just wanted to add that Photoshop also allows to save images in png-8 when you optimize the images.

Originally Posted by dreadingjs

Yes but it doesn't support multiple values for alpha-transparency, whereas Fireworks does. That's the difference.

See PNG8 – The Clear Winner for a more detailed answer.

I wrote something about this too: Transparent Images Without the Hacks