png hack for IE6 - best method?

Question

Hi,

I haven't used a png hack for IE6 for ages. Last time I used one I used this:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

because it supports background-repeat/position on a transparent png set as a background in css.

Is there anything around that has become industry standard that I've missed?

Answer 1

I don't think there is a "standard" on this one, just use whichever plugin/alternative/maybe hack works for IE6 users. As long as the performance is good for your target audience and there are no other issues, you're all set.

Personally the sites we're on are also running jQuery, so this is what I used, if that helps at all...no issues that I can recall.

---

I think those interested in standardizing things have left IE6 whenever possible, and those stuck with it (corporate environments, mostly) are busy trying to find out why life hates them :)

Answer 2

We gave up to use PNG fixes for backgrounds, it slows IE6 a lot and really buggy. So we use separate graphics and CSS for IE6 (simplified or flatten with transparency layers) and link this special CSS using IE conditional comments.

All users starting IE7 will get page with true transparency, IE6 users will get page with simplified graphics, but without any nasty hacks.

Answer 3

I've started using the Unit PNG Fix lately. As Nick said, there isn't a standard here, so use whatever works well with your project.

The reason I like Unit PNG is because it allows for opacity animations on transparent .pngs. Ordinarily this creates a horrible black outline around the .png during the animation. To get it working all you have to do is nest your .png and then animate the opacity on the parent element:

<div id="toAnimate">
   <img src="awesome-transparent.png" alt=""/>
</div>

And the jQuery:

$('#toAnimate').animate({opacity: 0});