Comments on: Ajaxian Featured Tutorial: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery

By: ermenisoykirmi

ermenisoykirmi — Fri, 30 May 2008 21:12:45 +0000

Thanks.Good article

By: caphun

caphun — Tue, 15 Apr 2008 10:14:06 +0000

@brian: I just read through your responses to all commenters, in which you failed to look at my response above. I still think you are over thinking this problem. If you use PNG8 transparency, you would not have to include any of those hacks such as IE PNG Fix, jQuery or IE6 specific CSS. You’d end up with slightly jagged edges in IE6 but what you’d get is better performance, less bloat, and graceful degradation even with JavaScript switched-off. Btw, I love jQuery!

By: Brian Dillard

Brian Dillard — Mon, 14 Apr 2008 19:27:26 +0000

@all commenters:

Thanks to everyone who posted alternative solutions to this problem. Many seemed very useful, though all of them make different tradeoffs than the ones we chose to make. Given the amount of debate this has generated as to the “right” solution, I’ve spun this into another post here:

http://blogs.pathf.com/agileajax/2008/04/post-1.html

As far as why my little old post about a decidedly un-sexy topic got picked up by Ajaxian in the first place, well, duh! It’s because I used “jQuery” in the headline. I thought everyone knew about the jQuery team’s secret conspiracy to take over the world. :-)

By: caphun

caphun — Mon, 14 Apr 2008 17:06:14 +0000

I agree, it’s just not worth the effort especially when all they’re doing are anti-aliased rounded corners! I posted a response to this article a few days ago though looks there seems to be a problem with Trackbacks on Ajaxian. Basically I think its an overkill and demonstrate an alternative solution, see:

http://yelotofu.com/2008/04/the-png-transparency-trap/

By: MorganRoderick

MorganRoderick — Sun, 13 Apr 2008 21:05:49 +0000

I’ve used bgsleight, slightly modified, for years for the logo on my website … which also has been dormant for a couple of years.

I only did it out of stubborness, and wanting to prove it could be done. After realising the amount of issues with it, I’ve since given up on using transparent PNG’s for IE6.

It’s time IE6 users upgrade their browsers, or deal with the fact that the internet has evolved while they were sleeping.

By: Breton

Breton — Sun, 13 Apr 2008 07:54:20 +0000

@ck2, sure, as long as your choice is fireworks. If it’s anything else, then don’t bother, nothing else supports png 8-bit alpha. Unless you don’t mind having simple 1-bit (on/off) transparency.

As for the solutions involvinng the directx alpha filter, behaviors, and/or javascript: DON’T DO IT. unless you want to risk crashing the browsers of a significant portion of your audience, as detailed here:
http://blogs.cozi.com/tech/2008/03/transparent-png.html

By: WillPeavy

WillPeavy — Fri, 11 Apr 2008 23:22:25 +0000

I tried Turnbull’s script probably a year ago and remember it being very buggy. For alpha transparency in IE6, I’ve been using the AlphaImageLoader filter for years, and that has worked better than any other method for me.

By: naterkane

naterkane — Fri, 11 Apr 2008 18:10:44 +0000

here’s an update that i did to fix some issues with Drew McLellan’s bgsleight.js

http://www.naterkane.com/blog/2007/03/26/bgsleight/

do people still not know how to work around IE6’s limited png support?

By: ck2

ck2 — Fri, 11 Apr 2008 12:28:16 +0000

Or just spend a few minutes in your graphics editor of your choice to convert your PNG32 to PNG8 transparency.

Internet Explorer displays PNG8 with transparency just fine and saves a shedload of slow, bloated code to fix the issue.

By: Yves

Yves — Fri, 11 Apr 2008 08:19:47 +0000

I’m actually working on a js library dedicated to elements what renders png images.
Take a look : http://png-hack.googlecode.com

By: deadcabbit

deadcabbit — Fri, 11 Apr 2008 07:35:26 +0000

Is this year 2001? IE6 png transparency? News on Ajaxian? Good heavens…

By: kim3er

kim3er — Fri, 11 Apr 2008 07:08:05 +0000

The CSS Behavior I found works for background images. I put no effort at all into PNG support. It’s called iepngfix and it was written by Angus Turnbull, to whom I’m extermly grateful.

By: cromwellian

cromwellian — Fri, 11 Apr 2008 06:41:31 +0000

GWT ImageBundles also solve this problem neatly and also handle CSS sprites at the same time, see http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/client/ui/impl/ClippedImageImplIE6.java for the trick used.

By: Matt

Matt — Fri, 11 Apr 2008 01:07:06 +0000

@triptych: What option is that?

By: triptych

triptych — Thu, 10 Apr 2008 22:38:42 +0000

A technique we used at Yahoo! was to run the images through pngcrush http://pmt.sourceforge.net/pngcrush/ and convert all the levels of alpha into one alpha – IE can support a single alpha channel, so you’ll get an image that looks fine in all other browsers and doesnt break in IE6

By: Matt

Matt — Thu, 10 Apr 2008 20:34:31 +0000

I deal with the background position problem by using a java servlet to generate a new image. This works for positioning of a whole background image and picking out parts of a sprite sheet. The servlet will also set a background color if I specify one, so in that simple case I don’t even need to use any extra css. This might not be the best solution for everyone, but it works great for me.

By: zero0x

zero0x — Thu, 10 Apr 2008 20:19:14 +0000

I know a great way how to solve this problem..

Save your png’s also as GIF (with removed shadows or whatever uses transparency)

Than use gifs instead of pngs in your css.

It will look worse in IE6 (no transparency stuff) but that’s the problem of @#$ users who still use ie…

By: staaky

staaky — Thu, 10 Apr 2008 19:37:55 +0000

Fixing pngs with javascript is bad practice. You’ll end up with a flash of unstyled content. CSS and conditional comments would be a better choice.