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.

VPC images for ie6 ie7 and ie8 for web development and testing from Microsoft

Microsoft give away free time crippled VHD files for this purpose – search for “Internet Explorer Application Compatibility VPC Image”. Today you will find this link here. Look at that link – SEO urls a-go-go! Gone.

Problem is that getting these images to play nice with VMWare Fusion for Mac is not so straightforward. The only way I’ve found to do this is documented here on the VMWare communities. The result — at least without the required XP Pro install disk which I have packed away in a box somewhere — is pretty good. Not as seamless as the original VirtualPC image I converted but very usable.

An aside… on forcing IE8 to be backwardly compatibile with IE7

…is via a metatag in the head element to ask it nicely to behave like IE7:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

DON’T BREAK THE WEB! They cried. I think there’s ironing in there. Nice starch.