PNG Images, A MSIE Fix

This small and easy script will fix the problem with transparent backgrounds in Portable Network Graphics (PNG) in Microsoft Internet Explorer (MSIE). It uses a small script, which you call in your Cascading Style Sheet (CSS) with a behavior attribute. Note that this will only work for images defined with the img tag, and will not work for CSS backgrounds.

Background

You might be asking yourself, “why would a Linux guy like Matt care about MSIE?”. Well, the short answer is, 52% of the viewers of this website use MSIE, so we all have to account for it’s shortcomings.

MSIE has always had problems rendering PNG images properly. The issue is with alpha channels in transparent PNG images. MSIE, in all it’s glory, displays the transparent background as a solid gray or black background.

Microsoft (M$) has been promising to fix this issue for about five years now, but has yet to do so. There is a petition to force M$ to fix the problem, so please go sign the petition.

So, let’s get started.

Configuration

There is only two small files on the tweak, and some small CSS to implement.

First, upload the file, blank.gif, to a directory of your choosing. Now open up pngbehavior.htc and change the path of blank.gif to were you uploaded it, and make sure you use an absolute path here. So if you uploaded to the directory /images/ then it would be:

line 29:    var blankSrc = "/images/blank.gif";

Second, after saving, upload the file, pngbehavior.htc, to a directory of your choosing. Remember the directory, because we will need it later.

Then, we need to set a CSS “class” or “id” for the images, to define them in CSS. Or we can use some other way to define them in our CSS.

Using the Script

I think the easiest way to show you how to use this tweak is with examples. so here are a four examples to get you started.

Example 1

Here is the Extensible Hyper Text Mark-up Language (XHTML) for this example:

<div id="article"> 
  <img src="image.png" alt="image" width="20" height="20" /> 
</div>

For this XHTML we will need the following CSS:

#article img { 
  behavior: url( path/to/pngbehavior.htc ); 
  padding: 0; 
  } 

NOTE: The #article img CSS will define all images in the "article" <div>.
Consult your CSS manual for more information.

Notice the behavior attribute. This attribute calls the script which fixes the background problems. I hope you remembered the path to the script, as this is where you put it.

Second, notice the padding of 0. YOU NEED TO HAVE THIS, since the script replaces the image with a CSS background, and any padding will cause the image to be enlarged and distorted.

Finally, notice the XHTML above. The “height” and “width” attribute are defined. YOU ALSO NEED THIS, since without it the script will not know what size the image is, and the image will be distorted.

Now that I’ve shown you the basics the next three examples will elaborated on them.

Example 2

Here is the Extensible Hyper Text Mark-up Language (XHTML) for this example:

<img src="image.png" alt="iamge" width="20" height="20" class="png" />

For this XHTML we will need the following CSS:

.png { 
  behavior: url( path/to/pngbehavior.htc ); 
  padding: 0; 
  }

The behavior and padding CSS attributes are as before, and the image XHTML has the “height” and “width” defined as well.

Example 3

Here is the Extensible Hyper Text Mark-up Language (XHTML) for this example:

<img src="image.png" alt="iamge" width="20" height="20" />

For this XHTML we will need the following CSS:

img { 
  behavior: url( path/to/pngbehavior.htc ); 
  padding: 0; 
  }

In this example we have not defined any “class” or “id”, nor have we got it in a defining <div>. The beauty of this script is that, if the image is not a PNG, such as JPG, GIF, etc., it will not apply anything to the image, just leave it alone.

So, in our CSS, we will just define all images to use the behavior. Again notice the behavior, padding, height and width as in example 1.

Example 4

Here is the Extensible Hyper Text Mark-up Language (XHTML) for this example:

<img src="image.png" alt="iamge" class="png" />

For this XHTML we will need the following CSS:

.png { 
  behavior: url( path/to/pngbehavior.htc );

padding: 0; height: 20px; width 20px; }

Wait, you say, you told me I needed to have the height and width in the XHTML. Well, I lied, you will notice that I am defining the width and height in the CSS. Either way, CSS or XHTML, will work. This method is good for multiple instances of the same image, like the comment icons on my home page. And notice that the other attributes are the same.

Conclusion

Now that I’ve shown you many ways of using this tweak, you should have no problem’s implementing it on your site. Should you have any changes, problems or suggestion, please leave a comment on this post.

One last thing to note. The behavior attribute is invalid CSS, so it will invalidate your CSS, duh. However, the behavior attribute is only recognized by MSIE, and will not affect your CSS layout in other browsers like FireFox.

Download and License

See the blue box below for download and license information.