wackomenace

The solution, as I found when experimenting, is to use 32-bit PNGs with alpha transparency and load them using the filter hack (search Google for “ie css filter alpha transparency” to find out all about this hack). The CSS code goes something like this:

#header { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.png', sizingMethod='scale'); }

Remember to change the filename before using it. Together with transparent 32-bit PNGs, everything should work well, even in Internet Explorer! Remember to put this non-standard code in a stylesheet that is only read by Internet Explorer. You can use conditional comments to achieve this like so:

<!--[if lt IE 7]><style type="text/css" media="screen">[CSS rules go here]</style><![endif]-->

Any rules encased in the comments above will only be read by Internet Explorer version 6 and below.

NOTE: One final note before the end of this little how-to - if you specify transparent images in CSS using background, and then tell Internet Explorer to use them via the filter hack, then it will place the image specified in background on top of the one specified in filter, thereby defeating the whole purpose of this how-to! To get around this, aim the background rules at any browser except Internet Explorer, and then use the filter hack. You can do this like so:

html>body #header { background: url(header.png) top left no-repeat; }

The html>body part throws Internet Explorer off-track and makes it ignore that particular rule, while other browsers understand and use it, thereby making the whole thing work!

That’s it for now - enjoy yourselves with 32-bit PNGs!