Ah, IE6 -- how I hate you so.

The lovely folks in Redmond have finally incorporated proper 24-bit transparent PNG rendering in Microsoft's next colossal piece of crap, IE7. Yippee! [And I wonder if was just not being able to get the damnable FILTERS past W3DC or that they had to pay Adobe a royalty.] Unfortunately, that doesn't fix the problem with IE6 -- and apparently, IE6 still has a higher penetration rate.

There are a number of JavaScript fixes for this that redraw and reinsert -- but they tend to cause the enduser's render to chunk a bit. The solution? Use IE's weaknesses against itself.

I wish I could say that I thought of this, but I didn't; some other smart cookie figured it out. I have tweaked a couple of things, however...

IE uses Microsoft's half-assed internal FILTER call in order to render out 24-bit transparent PNGs. Okey doke, and what a pain in the gluteal regions, as everything else sneezes when it sees this junk. But IE also ignores any CSS with this structure:

.divname[class]

The upshot to this? Two div calls -- one for IE, one for everyone else. So say you want a transparent PNG floating somewhere, like that stunning logo at the top of the page? Your code might look like this:

.logo {
	position: absolute;
	z-index: 10;
	top: 61px;
	left: 0px;
	width: 369px;
	height: 180px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
	 (src='../img/abk_logo.png',sizingMethod='image');
}

.logo[class] {
	background: url(../img/abk_logo.png) left top no-repeat;
}

You set all your parameters in the first call until you're ready for that background image; everything sees it. When you get there, in plugs the FILTER; IE6 is happy, everything else says "nope". Then the second DIV call for .logo with the [class] annotation which IE ignores, stating the background image. Voila!, you've got a transparent PNG.

• There are only two calls -- image and scale. They do pretty much what you thought they would, i.e. either present as a sized image or scale an image to fit a space. The upshot is things don't tile. So if you want to do shadows over a varied background [like this site] you need to create a top image for the rounded corners, left and right images that will stretch, and a bottom image to finish it off. Now you know why I still like tables so much.
• You have to call at least one size dimension -- width or height. I generally use both if possible, just for safety's sake.
• You can't use the PNG as an anchor. The way to cheat this is to put a transparent GIF over the top of the PNG and anchor to that. Yargh. Oh, the pain I suffer for my art.