Update 2009

I’ve now jumped to the other side of the fence. In the name of speed and slowly [oh so slowly] dying share of IE6 I’ve stopped trying to pander to it. There’s a few extra bugs and issues to contend with anyway. So what I’ll do now is specify a regular gif or PNG8 file in an for IE6 using a selector hack. Anyway – for posterity here’s the old articl

Have nice PNG with transparency. Wish to implement. Must consider IE6. Nasty, distinctly non-transparent grey background for PNGs in IE6.

Current job requires a PNG implemented as a CSS background which repeats on all pages of the site…

If-already-then-already — the search was on to find a solution that works on CSS background images and regular in-line images. That and it had to be a nice standards compliant thing with a low footprint.

Jump to the best options and/or the conclusion

Googled it. Solutions I found and tried first:

  • supersleight – couldn’t get it to work at-all at-all.
  • unitpngfix – worked well – but if image is reused (cached) on a different page then image suffers from a flash of the nasty grey. That and there are positioning issues.
  • ie7 – works as unitpngfix – also does other things I’m not too interested in. No want the flashy flashy grey.

Then, on having another look a the long wiki list of other possible options, – eureka! I realised I really should be using IE6 itself as the first test. [Still not used to having IE6 on my mac!] Most of these have an on-line demo! Brilliant. What a clever chap. [A-hem.] OK – it’s late, forgive me please…

With intelligent filtering™ now in place I found that most of the solutions suffer from the grey/gray flash. Of these not-so-rans Flixn suffers the grey flash but at least positioning is good.

The Best Options

In the end the fix comes in the shape of IE’s proprietary image filters; DirectX weirdness over a ten-year-old standardised graphic format. “Go figure.” Anyway most of the fixes available use this feature but only two options pass the grey/gray flash test*:

  • “pngbehavior” from webfx
  • “Cross Browser PNG Transparency” parts one and two from drunkenfist

pngbehavior

Great! Just add a CSS class to your inline images, one CSS declaration (non-standard) and throw a lovely pngbehavior.htc. Bingo. But this only works on inline images – not with CSS background images…

“Cross Browser PNG Transparency” from drunkenfist

Perfect with CSS background images but more work than pngbehavior for inline images as requires an extra named div and then two lines of CSS per image. Great point from this chap about using the conditional comments and separate style sheets to hide IE specific CSS hacks from other browsers.

Conclusion

OK – so neither of the best options fulfil the requirement to fix PNG24 images and CSS backgrounds nicely but can drunkenfist and pngbehavior work together? YES!
Me, happy? Yabetcha.

CSS goes something like this:

/* TRANSPARENT PNGs IN IE6 /
/ For background images (from from http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/ ) NOTE THE FIRST background:url() IS BLANK. LEAVE IT SO! */
#YourID {
background:url();
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='
/path/to/image.png',sizingMethod='crop');
}

/* For inline images (from http://webfx.eae.net/dhtml/pngbehavior/demo.html
) */
img.png {
behavior: url("/path/to/pngbehavior.htc");
}

Wrap all this IE gubbins into a single CSS file and link via a conditional comment to hide your shame (and keep things ‘validatable’ of course).

Said conditional bit to put in your head:

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="STYLESHEET" type="text/css" href="/path/to/ie-gubbins.css" />
<![endif]>
<![endif]-->

Don’t forget that pngbehavior.htc file from webfx.

I tried supersleight again but still couldn’t get it to work at-all at-all. Pluitsolutions was not tested as I couldn’t find an on-line demo to show it whooping ass of the grey box flash.

Last updated on 10th September 2018