DDSN Weblogs
Home / Blogs /  / DDSN Labs Blog Post
  • Print Page
  • Email Page
  • Feedback
  • Share Page

How to Enable Transparent PNG Support in IE6

Monday 5 July, 2010
HTML and CSS,Gremlins (Bugs and Problems),Methodologies, Processes, Ideas

I'm going to talk about a few ways to enable PNG support in IE6, leading up to my favourite. I've recently been using a great little Javascript library called DD_belatedPNG by Drew Diller which enables PNG alpha transparency support in Internet Explorer version 6 and older, but without all the mucking about that other solutions entail.

IE6, Really?

Before I get stuck into the case study, some developers reading this article might wonder why we care about transparent PNGs in IE6. I've heard plenty of developers argue for dropping support for IE6 altogether. After all, Google plan to, and YouTube is on the way too.

Well, by some counts at the time this article was written, IE6 still has more market share than Safari and Opera combined. There's no need for that many customers to be disadvantaged by not seeing the same graphical presentation as the rest see, especially when we can solve the problem easily. Here at DDSN we also come across a number of development projects (intranets in particular) where a corporate network is locked down and IE6 is the only browser available. So we take it seriously.

The Problem

PNGs offer the benefit of up to 256 channels of transparency, meaning you can create complex transitions and overlays such as soft drop shadows etc, which will work when overlayed on another element in your CSS - even another PNG. Unfortunately, for those who've been developing HTML and CSS for a while you'll no doubt be aware of the lack of support for PNG alpha transparency in Internet Explorer 6 and older. This manifests itself in the following way:

Here's how a png image with a transparent background appears in Internet Explorer 7 and later, and other modern browsers:

A PNG image with alpha transparency as seen in modern browsers

And here's the same image in IE6

A PNG image with a transparent background as seen in IE6

As you can see from the above, rather than showing a transparent background, IE6 instead renders a pale blue opaque background. This will obviously ruin your design unless you take some remedial steps.

Possible Solution: Use a GIF Instead

Unlike PNGs, the GIF format only offers one channel of transparency (that's either completely transparent, or not), and this certainly works if you've got a nice sharp outline to your image (say a logo or similar). But what about those soft shadows?

One option might be to dispense with the transparency and just reproduce the background as part of the GIF. If your background is just a single colour, this should work without a problem.

In fact, I'd recommend using GIF format in situations where you have some simple colours and a plain background. In the examples above, the GIF ended up being about half the file size of the PNG.

But what if you've got a more complex background - such as a gradient?

You could certainly attempt to include the relevant section of background image in your GIF, maybe something like this:

A GIF image with a gradient background

But as soon as your image moves even a pixel or two out of alignment, your carefully designed page falls apart.

So a GIF is okay in some cases. But if GIFs are out, what else can we try?

The Proprietary Alpha Image Loader

As people may already know, Internet Explorer actually offers a proprietary CSS property which you can assign to the element containing the PNG. It's known as the Alpha Image Loader and you can use it get PNGs displaying (partially) correctly in IE6.

Here's a quick example using a PNG for a background image

/*CSS for browsers other than IE6*/ 
element {
    background: url(/images/opacity.png);
} 

/*CSS for IE6 Only*/
*html element {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="images/opacity.png", sizingMethod="scale");
}

I'd recommend you move the above IE6 styles to their own stylesheet and include with conditional comments, as the filter property will invalidate your CSS. Note also that I've set "background" to transparent in the IE6 styles, as the filter property will add the background image as well - so without this you'd end up with the same image twice.

Unfortunately, whilst the above is probably okay if you want to include only one or two (non-repeated) PNG images in your page, and there's a number of Javascript libraries which can automate this process for you, there are a number of limitations to this approach:

  1. Backgrounds won't repeat/tile
  2. Backgrounds cannot be positioned correctly, only at the top left, or scaled to the full dimensions (potentially messing up the aspect ratio)
  3. They'll only work on floating or absolutely positioned elements

What I've also noticed is this filter puts quite a strain on your browser, so applying it to more than a couple of elements on a page will slow the page right down in IE6.

DD_belatedPNG to the Rescue!

Forgoing the clumsy Alpha Image Loader approach above, the DD-belatedPNG library dynamically adds a VML element before the elements containing PNGs on your page. Amazingly, by adding this element to the page, PNGs magically start working in IE6. Even better, there are none of the limitations outlined above with Alpha Image Loader.

Here's a very simple page which includes the DD_belatedPNG library and targets the specific ID of the div element using DD_belatedPNG.fix('#ExampleElement').

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
    <head>
        <title>DD_belatedPNG Example
        <!--[if lte IE 6]>
            <script type="text/javascript" src="DD_belatedPNG_0.0.8a-min.js">
            <script type="text/javascript">
                DD_belatedPNG.fix('#ExampleElement');
            </script>
        <![endif]-->
    </head>
    <body style="background: url(gradient.gif) repeat-x;">
        <h1>
            An Example Page Using DD_belatedPNG
        </h1>
        <div id="ExampleElement" style="background: url(blog-button.png) no-repeat;height: 102px; width: 268px; text-indent: -3000em;">
            <p>
                Our example content. Visit DDSN for cool ideas and use a CMS with punch ad personality.
            </p>
        </div>
    </body>
</html>

And that's all there is to it... We've now ensured IE6 users can see our PNGs as intended. Best of all, it's a cheap and easy approach that doesn't compromise our development process in any way, and frees up our design staff to create fine presentations without worrying about how the code will work.

Many thanks to Drew Diller for coming up with this script, you can download the library from his site

Comments

No comments have been added.

Add a Comment
Input Verification

To help us avoid spam, please enter the text exactly as you see it in the image below. If your text doesn't match the image, you'll be able to try again with a different image.

Follow Us

  • Top
  • Print Page
  • Email Page
  • Feedback
  • Share Page