Blog

Semi-Transparency In Internet Explorer 6

As I’m sure any web designer has experienced, we’re sometimes forced to make compromises between what can be done in a mock-up and what can be smoothly implemented in code. One of the most glaring examples of this is dealing with the way a site is rendered in Internet Explorer 6 – a browser released in 2001, and mysteriously still embraced by nearly twenty-five percent of the browsing audience. This was, mind you, the same year as the very first black and white iPod was released – you see very few of those around. In fact, people were still using Windows ME in 2001. Not a lot of that going on lately either.

I’m just saying.

In terms of aesthetics, one of the major issues we run into with IE 6 is that it can’t render a semi-transparent .png without help. It’s not impossible, but it can be a little tricky.

Here we have an example of a pretty basic drop-shadow, in the header of a site we recently built:

But when that page is viewed in IE6:

The key to making things render properly is a proprietary filter that can be applied through either CSS or Javascript.

#feature .box {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/box.png',sizingMethod='scale');
}

The trick here is that the path to the image should be relative to the rendered page, not the stylesheet itself. Counter-intuitive, I know, but such is the nature of the beast.

While it does work, there are a few pretty major caveats:

• This filter is 100% invalid css. For this reason, I would only encourage you to apply it to IE 6 and below through Javascript:

  img.style.background = "none";
  img.style.filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/box.png',sizingMethod='crop');";

  At the very least, keep it in a IE6-or-less conditional stylesheet.

• There’s a pretty noticeable lag, as IE isn’t actually just placing the .png on the page – instead, it’s drawing an area of the exact same height and width as the .png, and then applying the .png to that. The original spec included someone at Microsoft HQ burning the image to a CD, running it to your house olympic-torch-style, printing it out, and scotch taping the .png to your screen. That’s why the background: none; is there: the filter isn’t applying a new background, it’s adding a new element altogether. Without removing the background, you’d be layering the rendered .png over the broken one.
• No background-repeat. You can set the sizingMethod to scale or crop, neither of which are terribly helpful.
• Links inside of a div with a semi-transparent background may not be clickable, and may require relative positioning and some fiddling with z-index.

Of course, all things considered, all of this should be avoided whenever possible. Nine times out of ten, I find that I can conditionally deliver a transparent .gif with a subtle matte background to IE 6 and have it look just fine. Or at least, as “fine” as things ever look in IE 6.

Not that we’re bitter.

Tags: Browsers, css, javascript

4 Comments to Semi-Transparency In Internet Explorer 6

1. I’ve used techniques like this before, and there always seems to be an issue when it comes to links that are png images. I prefer to use a script that handles this instead. It works for CSS background, repeated CSS backgrounds, and links

   Check it out here:
   http://www.dillerdesign.com/experiment/DD_belatedPNG/
Christopher on September 2nd, 2009

2. Thanks for the comment Christopher!

   There are tons of PNG fixes out there and this is just one of them. I’ve used the DD_belated PNG fix before and it works wonders!
Niki Brown on September 2nd, 2009

3. Hey Christopher,

   I’ve run into the unclickable link issue you’ve described myself, and come up with a pretty decent workaround recently:

   I discovered that you can force links to be responsive again by setting a non-filtered background image of certain sizes (really), one of which is 1px by 1px. So, rather than declaring background: none; before the IE filter, I’ve started using a one pixel transparent gif in place of the original background. It doesn’t interfere with the IE-redrawn background in any way, and links continue to work normally.

   Naturally, as with any voodoo-esque IE workaround, your milage may vary. But for my part, it’s worked consistently.
Mat on September 15th, 2009

4. True words, some unadulterated words man. Thanx for making my day.
Bagirracy on December 11th, 2009

Leave a comment