Most people developing complex designs for the web are making use of transparent 32-bit PNG images which are fantastic and beautiful and crisp in every modern browser. Sadly not all browsers in wide use are modern, namely Internet Explorer 6. In order to make transparency work in IE6 there are a number of JavaScript solutions available which generally work wonderfully well. However I recently had need to support a page in IE6 whose designs required transparent PNGs but for circumstances beyond my control did not permit me to use JavaScript at all.

After some consideration I had a realization, I didn’t need my CSS to validate either. Since I was able to use invalid CSS I could make use of some dirty hacks in order to achieve my goal. The trick was that none of the images could be inline, so they were all implemented as background images. For each element which had a background image which was a transparent PNG I set the background image normally and then in the IE6 hack changed the background image to a blank.gif¹ and then set the proprietary filter property the the element. The code ended up looking something what is shown below and it worked like a charm under these admittedly narrow circumstances.

#selectorId {
	background: url(/path/to/image.png) top left no-repeat;
	_background-image: url(/path/to/blank.gif);
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/image.png", sizingMethod="scale");
}

On a project I’ve been working on recently we are making use of a number of 24-bit PNG images. This has cause a number of problems in IE6 because we’re also making use of a number of opacity animations using the MooTools javascript framework. This results in a lot of black crap showing up when you animate or change the visibility or opacity of the transparent PNGs in Internet Explorer 6 and 7.

The first solution was easy, disable opacity animations on transparent PNGs. This fixed the problem almost completely but on a page with a flash movie and a number of things still changing opacity at the same time (even though it was from 0 to 1 which was basically a visibility toggle) the black overlay still appeared from time to time. The most successful attempts at a solution without eliminating the opacity changes were inspired by an article about developing Mimeo which was also quite educational about how IE6 handled 24-bit PNGs and some image retrieval in general. The most informational part is included below..

The apply method is basically used to tell the filter to capture it’s current state in terms of layout and visibility and track changes between then and a call to the play method. It really shouldn’t be necessary to call this in the AlphaImageLoader’s case because there’s no transition, but for whatever reason, this change alone, seemed to make this bug disappear. I say “seemed” because it still appeared every now and then. Later we noticed that once we were no longer including the gAMA header in the PNGs we generated the problem went away entirely. Since we didn’t need gamma settings, this was the final solution to the problem for us. Whether or not the apply call is still needed at this point is unknown as there was no sense in removing something that originally had solved the problem and introduced no performance impact.

Of course I attempted the apply method and removing the gAMA header which rather than fixing the entire problem still only mostly fixed the problem. After being stuck at this point for a while, attempting to find more information and another way to basically fix the way IE6 handled these images without removing the transparency I had something of an epiphany. Since I was already not animating the elements with the transparent background images why not just move them rather than changing the visibility or opacity. It turns out this incredibly simple and solution worked fantastically for me. The elements in question were already using position: absolute; and so all I had to do was set left to something outrageously off the screen, in this case I used -15000px.

Of course the elements won’t always already be absolutely positioned but this technique can still be used if you store the original value of position and whatever position attribute (top/left/bottom/right) used to place the element off-screen. That’s all there is too it!