IE6 issues with transparent PNGs

Question

I've gotten used to the idea that if I want/need to use alpha-trans PNGs in a cross-browser manner, that I use a background image on a div and then, in IE6-only CSS, mark the background as "none" and include the proper "filter" argument.

Is there another way? A better way? Is there a way to do this with the img tag and not with background images?

Answer 1

The bottom line is, if you want alpha transparency in a PNG, and you want it to work in IE6, then you need to have the AlphaImageLoader filter applied.

Now, there are numerous ways to do it: Browser specific hacks, Conditional Comments, Javascript/JQuery/JLibraryOfChoice element iteration, Server-Side CSS-serving via UserAgent-sniffing...

But all of 'em come down to having the filter applied and the background removed.

Answer 2

The usual solution for img elements is to change the src to point to a 1x1 pixel transparent GIF and then use the same filter hack.

Answer 3

That's most likely the "best" way. But keep in mind that it's not just alpha-trans that IE6 doesn't implement properly when it comes to PNG files; the color space is corrupt due to IE not implementing the gamma properly, and thus PNG files often show "darker" than they should.
One alternative "solution" that we implemented on a recent project was to mark every png image with a "toGif" class, in the CSS of which a custom behavior .htc is called which changes the .png extension to .gif if the browser is detected to be one we've marked as a problem. We just include a GIF version of every PNG alongside it in the same path, and if the browser is found to be one that doesn't handle PNGs properly, it swaps it out with a GIF version of the image. We therefore sacrifice the alpha blending in favor of guaranteed full-on transparency and color accuracy, and only do so when we know it's probably not going to look right as-is.
It may not be an ideal solution, but it's the nature of cross-browser I suppose.
Edit: Actually now that I look at the project in question, we used an .htc behavior for an img class called "alpha" as well which tosses the correct filter on the image automatically. So you're detecting the browser using javascript instead of an IE6-only pure CSS hack, so it might be a little bit more elegant... but it's basically the same thing.
For an introduction to how to write DHTML behaviors, try this link.

Answer 4

Here's a specific solution I like, using Javascript (jQuery):

http://jquery.andreaseberhard.de/pngFix/

It's easy to add to an existing site, handles all manner of images (form buttons, backgrounds, regular IMG tags, etc), and leaves your CSS nice and clean.

Answer 5

It's the same hack, but here's a nice way to apply it to images with JavaScript

http://www.atalasoft.com/cs/blogs/davidcilley/archive/2006/05/10/png-transparency-in-internet-explorer-revisited.aspx

Answer 6

The image loader is the only available fix for IE6. Note that it's PNG support is very rudimentary (along with IE7, too), and cannot correctly handle looped transparent backgrounds. I learnt this the hard way when trying to design a website with a transparent container. Worked perfectly in Firefox, of course.

The fix should be OK for small areas of background and any transparent foreground graphics, but again I'd advise against designing a website that uses large amounts of transparency with Internet Explorer.

In the end my solution was to display a flat colour for IE, but retained the transparency for the other browsers. Didn't hurt the design too much in the end, fortunately.

Answer 7

Another way around this is to use 2 separate images, e.g a GIF and a transparent PNG, and target your CSS accordingly:

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

IE 6 does not understand CSS child selectors so will ignore the rule, whereas browsers that do understand it will give you a nice transparent PNG.

The only downside is that you have to have two separate images and the design might not look exactly the same cross-browser but as long as it does not look broken you should be ok.

Answer 8

A List Apart has a pretty good article on this with example solutions.

Answer 9

I found this site too with a great summary and a simple JavaScript include to use to fix the issue if you aren't already using jQuery or anything else listed above.

Answer 10

Here are 2 options which do not use the AlphaImageLoader filter.

• DD_belatedPNG by Drew Diller: Uses a VML-based solution rather than the AlphaImageLoader filter.
• PNGPong: A Flash based solution

For me, if sending a matted .gif to IE6 only isn't feasible, I use Fireworks to add an IE6-friendly palette to the .PNG.