Transparent PNG in IE6 with CSS Hacks and AlphaImageLoader

This entry describes a method for displaying a transparent PNG in IE6 using a technique that I actually don’t use anymore. I just wanted you all to be aware of your options when it comes to getting the desired results. You can find the preferred, hack-free method here.

This is an example of isolating browsers using hacks, or exploiting the deficiencies in some browsers. Understand that browser targeting is not limited to transparent PNG and can be used for anything that you want to do only in certain browsers.

We start by defining the code for our awesome transparent graphic. Nothing special here… business as usual. If you view this in IE6, it will have a translucent blue box around the image in all the transparent areas.

#logo {
	background: url(images/logo.png) no-repeat left top;
}

Then we would add the parent-child selector.
In this example, the immediate parent element to the ‘logo’ is the ‘header’ element. So, we use the ‘greater than’ symbol separated by spaces to say: for element ‘logo’ that is a direct child to ‘header’, do this. IE6 and below don’t understand parent-child selectors, and skip right over them. So, we have effectively hidden this entire CSS rule from those browsers.

#header > #logo { /* FOR ALL BUT IE */
	background: url(images/logo.png) no-repeat left top;
}

Next, we would follow that with an IE-specific hack.
As it turns out, IE5.5 and IE6 think that it’s possible have an element above the HTML element. Fortunately, all other browsers on the planet know better, so they skip the next rule because it says: For all elements (*) with this selector path starting above the HTML element, do this.

And this is where we’d add our IE-specific alpha transparency filter.

* HTML #logo {/* PNG Alpha IE Win ONLY */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.png', sizingMethod='scale');
}

What we’ve done here is display a transparent PNG natively in all browsers except for IE6, and displayed the same graphic via a proprietary alpha filter only in IE6.

For most of you who have been doing CSS for a while, this is nothing new. I’m only doing this as a precursor to the cleaner way that I want to introduce you to shortly. So, stay tuned.

Notes:

Find out more about the attributes of AlphaImageLoader at MSDN