Set width and height for the element/s containing the transparent background image [...] (also, bear in mind that the background images can no longer be tiled or positioned via ‘background-position’)

Apply  position: relative; to any contained links to ensure functionality

The first point means I’ll probably not bother trying to tile a drop-shadow background image to a variable length column again. Time to switch to progressive enhancement with Photoshop CS4/Fireworks/other tools’ ability to stuff alpha transparency into  regular PNG8 files.

The second point is probably the better answer to my last PNG problem post.

Main post about how to work with PNG24 alpha transparency and IE6 …

I’ve been so excited to be able to use full alpha transparency PNGs and getting them to play nice in IE6. Today I’ve found another PNG/IE6 issue. It seems that in some cases IE6 doesn’t like to have links in an element that is child of one with a background PNG to which filter:progid:DXImageTransform.Microsoft.AlphaImageLoader is applied.

The solution (in my case) was very simple: just needed to close the div for the background and add another for the links. Now the links just appear to be contained by the background.

CSS trickery: eat my heart out.

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.