PNG Transparency Fix in IE6

PNG Transparency Fix in IE6

PNG Transparency Fix in IE6

As I was exploring different ways to use Transparent PNG files in some of my designs (Check out Smashing Magazine’s PNG post for some great examples), I had to first find out how to make PNG files work in IE6. As we all know, IE 6 does not fully support transparency.

The .htc Fix

Download the .htc file and specify which element/tag you want PNG support on. To learn more here is an online demo and set up instructions.

The Java Script Fix

SuperSleight
This is probably the best Java Script PNG fix for IE6 that I have come across. Please check out www.24ways.org’s tutorial for a guide on how to implement.

Google Code
I stumbled across this Google Code which was pretty straight forward. The downside of this is that script only fixes images named: *-trans.png. Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

Or the CSS Fix

I stumble across a simple technique that worked effectively, which uses CSS and conditional tags for IE, no Java Script involved.

Step1 – HTML

We can start out by creating a new html file and place an empty div tag with a class name “vehicles”.

<div></div>

Step2 – Style Sheet

Next lets create a style sheet called styles.css and add the following:

body {
    background: url(body-bg.jpg); /* Adding base background pattern */
}
.vehicles {
    width: 500px;
    height: 176px;
    background: url(vehicles.png) no-repeat;
               /* Adding background of the vehicles */
}

Step 3 – IE Style Sheet

Lets create another new style sheet and call this one IE.css.
Now we all know IE hates PNG files, so this is the part where we work the magic.

/* Notice I add the 'html' in front of the class name,
I did this so there will  no background property
conflicts with the other style sheets */
html .vehicles {
    background: none; /* Hide the current background image
                       so you can replace it with the filter*/
    width: 500px; /* Must specify width */
    height: 176px; /* Must specify height */
    filter:progid:DXImageTransform.Microsoft.
    AlphaImageLoader(enabled=true,sizingMethod=scale, src='vehicles.png');
}

Step 4 – Conditional Comments for IE

This is the final step. Now we will go back to the html file from step 1, and we will call both of the style sheets we just created.

Inside of the <head></head> tags on the top of your file, add the following:

<link rel="stylesheet" href="styles.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="IE.css" type="text/css" />
<![endif]-->

*Notice we have the conditional comments for IE6 on the 2nd line, this is where we tell IE6 to use the IE.css style sheet in addition to our regular style sheet.

Conclusion

These were 2 simple ways I was able to pull off the PNG problem on IE6. The good part about this technique is that it is XHTML compliant and it also reduces page weight.

If you have any suggestions, comments, or know of a better way, please give me a heads up!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>