Home
Blog
Training
Web Design
Social Media





Sign up for blog:

  via reader

May 9, 2009

PNG Transparency for IE6

Filed under: CSS,Tutorials — Carma Leichty @ 8:15 am

Have you ran into the ever-so-frustrating issue with png images not being transparent in IE6? I recently found very good documentation that explained how to implement the fix. The author of this fix is at twinhelix.com. I am going to cover the very basic steps here, but if you want more info, open the iepngfix.html file that’s included in the zip files.

Here are the basic steps.

Download the zip files.

Place the iepngfix.htc file and the blank.gif file in your website root folder.  (I did this to keep it simple. You can place them in subfolders.)

Copy and paste the following code into CSS or HTML:

<style type="text/css">
img { behavior: url(iepngfix.htc) }
</style>

You could also assign a class to this, so you can use that class for png files:

img.pngFix { behavior: url(iepngfix.htc) }

If you are using a png image as a background-image assign the behavior within that same style:

h1 {
background-image: url(../images/mctourism.png);
behavior: url(iepngfix.htc);
background-repeat: no-repeat;
height: 50px;
width: 336px;
float: right;
text-indent: -1000em;
}

This may be simplifying it too much, but, hopefully it will get you started in the right direction. The common issue I run into is the incorrect path to the .htc file. The path to the .htc file that is within the CSS style must be relative to the html file, not the CSS file (which is the ‘normal’ way of doing it). I haven’t tested this extensively, but if I was using a png image throughout the site (resulting in my html files being at multiple levels), I would try using the absolute address for the .htc file (http://www.somewhere.com/ienpngfix.htc).

The zip files contain a lot more detail and more options. Let me know how it goes!

2 Responses to “PNG Transparency for IE6”

  1. Carma says:

    Good idea, Jessica! I will put it on my list to do. Thanks for the idea!

  2. Jessica says:

    Carma, can you make a tutorial video about this? I know, I know…but I am a visual learner and it is easier that way. I am going to try it without the video for right now. ;)

Leave a Reply