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.
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:
The box is absolute positioned. As the blue div expands or contracts vertically, the shadowed box will hang over.
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.