Fixing Transparency in IE6

You’ve created this really great design and everything looks just like the treatment the client approved in all other standards compliant browsers, but then they come back and say “By the way, it has to work in Internet Explorer 6 as well.” Great, here comes hours of debugging and a separate style sheet on top of that. And what are you supposed to do about all those 24bit PNGs with transparency you’ve used?

History

I have tried several solutions like using the AlphaImageLoader filter in an IE6 specific style sheet, TwinHelix’s IE PNG Fix, Unit Interactive’s Unit PNG Fix and a number of others, but none of the fixes worked for every situation. These solutions worked well except when used with background-position, background-repeat and elements with the a:hover pseudo-class.

A better solution

DD_belatedPNG, written by Drew Diller, is a Javascript library that uses Microsoft’s implementation of VML (Vector Markup Language) instead of Microsoft’s AlphaImageLoader filter. It works by adding a line of CSS to the document via the DOM which acts as a MSIE-proprietary behavior (Javascript expression) that gets bound to the elements on the fly.

I’ve used it on a number of sites and have found that transparent images used with background-position, background-repeat and a:hover behave and display identically to modern browsers.

Usage

Implementing the fix is pretty straightforward, albeit you’ll want to use a conditional comment to keep other browsers from loading unnecessary code.

1. Download a copy of the Javascript file.
2. Refer to the file in your code (see code example below). It’s good practice to put Javascript at the end of the document just before the closing </body> tag.
3. Next, add a function that calls to DD_belatedPNG.fix()
4. Replace your_argument with either a CSS selector ('.class'), DOM element ('a, div, ul') or even a group of selectors ('.class, .class-two, #id').

Code Example

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('your_argument');
</script>
<![endif]-->

A little advice

I would caution against just using DOM elements as this triggers the fix() for every reference of the element in the HTML document, including elements that do not contain transparent PNGs. If you do decide to use them, absolutely do not use ('body') as an argument. Just don’t, Chicken Little, the sky is falling, the whole bad enchilada.

Last bit

There are still a few issues, like <tr>, <td> and <input type="image"/> not working, but for the most part this is the best solution to transparent images in IE6 that I have found to date.

  

Written by Brian Rhinehart

Brian Rhinehart is a designer and illustrator who has worked in the media and design industry for the past sixteen years. Aside from freelancing and running the illustration design blog Illustration Toolbox, he enjoys playing the bass, spicy foods and chasing the cat around the house with squeaky toys.