An intranet site facelift recently called for a table with a translucent background. Firefox, my preferred browser, has supported PNG’s optional alpha channel for some time — a feature that assigns an opacity to each pixel, from fully transparent to fully opaque. A quick google search revealed that Internet Explorer has offered PNG alpha support since version 5.5, so I got started.

Firefox’s native support of alpha PNG’s lends itself to a pure standards-based CSS solution: #table { background: url(alpha.png); }. Problem solved!:

Not so fast! Internet Explorer supports PNG’s, but it does not support their alpha channel. Instead, IE displays a gray block:

So the first order of business was to hide the CSS from IE6. This is where it starts to get a bit ugly, but is easily done via CSS child selector, since IE ignores such rules prior to version 7: body > #table { background: url(alpha.png); }. The “body >” prefix means that the CSS rule will apply to the named element #table that is a child of a body element. With IE6 ignoring the background, I was able to pursue it’s own kludgy implementation.

In a likely effort to embrace and extend web standards, Microsoft added more proprietary CSS filters to Internet Explorer 5.5. Among them was AlphaImageLoader, which “Displays an image within the boundaries of the object and between the object background and content”. It is this filter that offers PNG alpha support: #table { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-white50-1px.png', sizingMethod='scale'); }. With this rule in place, IE6 is able to display the translucent background.

To prevent subsequent versions of Internet Explorer from redundantly applying the AlphaImageLoader, I used Internet Explorer’s conditional comments:

<!--[if lt IE 7]>
<style>
#table
{
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-white50-1px.png',sizingMethod='scale');
}
</style>
<![endif]-->

But there was still one more surprise — this filter managed to render links in the table un-clickable. This was a mystery to me until I happened upon a comment on an allinthehead post from 2003. Links in the table will break unless the image is one pixel.

I created a small demo page (ZIP) with in-line CSS to demonstrate.