I need a way to get IE6 to render pngs with transparency properly. Javascript solutions I've used aren't much good as they wait for the image (or page) to fully load before applying the fix.

I could use php to detect whether the browser is IE6 and then serve up a fixed page, but I am of the understanding that browser detection using the user agent string is not advised as browsers can disguise themselves as a different one. But how much of a problem is this really?

IE6 is fundamentally broken. Don't spend too much heartache trying to improve the existing solutions.

I would strongly advise against browser detection using any method apart from IE-only conditional comments. Browser-sniffing is evil. Opera in particular frequently identifies itself as IE.

It's really not that big a deal. So there's a short delay. So what?

It is a big deal for me, as the main content of my site is pngs with transparency, and the way IE6 renders them just makes the site look really messy (at least I think so). As far as I'm aware, IE6 is still the dominant browser so as much as I hate it and would like to give its users a worse experience to encourage them to use a real browser, I need my site to display properly in it.

Examples of browser sniffing I've seen always check that the user agent string contains IE and not Opera, in some cases does Opera identify itself as IE without mentioning IE as well?

Your point about IE conditional comments gives me an idea though, what about including some javascript or a meta refresh tag in a conditional comment that reloads the page with a url query string (or maybe use some AJAX) so the server can tell if the browser is IE6 and then serve up appropriate content?

A fair point, but I think you're probably stuck with that behaviour if you want to use alpha-masked PNG's.



I'm not advocating that you ignore IE, but only that you learn what things are practical in it. IE6 hacks for PNG transparency have been done to death, and I'd be surprised if you found a way to improve on the known solutions.



Opera is well known to fool browser sniffing scripts. I can't offer more technical information, because I avoid these things like the plague. It's a bad road to travel.



Sure, but won't you still be stuck with the same problem? How are you going to render transparent PNG's in IE6 without a slight delay for the MS alpha image loader? All the PNG-fixing methods rely on this proprietary filter, and that's what causes the delay.

check out my post here http://www.thewebsqueeze.com/forum/index.p...ost&p=12261

it will show you that you can produce transparent png's using fireworks that will work in the majority of browsers, including ie6.

This post has been edited by welshstew: May 21 2008, 10:08 AM

Nice one Stew . I have been using JS hacks for too long but I will be giving this a go now

Cheers,

Ross

After doing some testing it seems that IE6 will wait for all filtered pngs to download completely before displaying them, rather than displaying them as they are downloaded like a modern browser does.

Thanks for the suggestion on PNG8, I tried it but my images are circles and got jaggedy edges when displayed on a different background colour to the matte.

The js I was using previously waited for all pngs to load and then applied the filter, which mean the page looked a real mess until everything finished loading and the filter was applied.

Using the script Mike suggested I found only the first couple of images would load unfiltered, then you need to wait while all pngs are downloaded and filtered, then all pngs would be displayed filtered. Any new pngs displayed would be filtered.

Using a server side solution no unfiltered pngs would load and you just have to wait for them to all be downloaded and filtered before they are displayed. Any new pngs will displayed unfiltered unless you have typed the necessary code for IE6 for each png or setup a script/function to do this for you.

I think I like the js solution Mike suggested best, I think I can live with a couple of unfiltered images loading before the filter kicks in. I'm actually using a slightly different script, I found the twin helix one didn't get on well with my lightbox script.

Thanks for your help with this.

Dave