CSS Hackz Series: PNG Fix for Internet Explorer

In this CSS Hackz Series article, I outline several solutions for displaying alpha-transparent PNG (a.k.a. PNG–24 format) images in everybody’s favorite broken browser, Internet Explorer. Specifically, IE versions through 6 (excluding IE 5 for Mac) fail to support alpha-channel transparency for PNG images. In these versions of IE, every pixel containing alpha-transparency is displayed with an ugly, flat gray color.

Fortunately, there are plenty of hacks and workarounds designed to “fix” IE’s PNG image-display problem. Unfortunately, every currently available solution requires the use of Microsoft’s proprietary AlphaImageLoader transparency filter¹. Thus, if you need to display translucent PNG images in IE, the solution will inevitably involve the AlphaImageLoader filter until more sophisticated techniques are developed.

General Method

The general implementation of the AlphaImageLoader transparency filter requires three steps:

Step 1. Include an IE-specific stylesheet via conditional comments:

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="http://domain.tld/path/ie-specific.css" />
<![endif]-->

Step 2. Within the same directory as the IE-specific stylesheet, upload a transparent GIF file² and this .htc file, provided by TwinHelix Designs which contains an excellent implementation of the required AlphaImageLoader function.

Step 3. Finally, add the following “custom extension” to your “ie-specific.css” CSS file:

.png { behavior: url(http://domain.tld/path/png.htc); }

Once in place, this method will enable IE (versions 5.5+/Win) to display transparent PNGs for any PNG images associated with the “.png” class. This method works great for designs containing multiple PNGs as the behavior is applied to all .png-classed images — inline or background — regardless of name or location. For designs using only a few PNG images, the next method is equally effective, and doesn’t require any external files.

Simpler Method

This method replaces the external “png.htc” and transparent GIF files with a small chunk of invalid CSS:

.png {
	cursor: pointer;
	background: none;
	/* filter applies only to IE5+/Win */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='fixed', src='http://domain.tld/path/image.png');
}
.png[class] {
	/* [class] applies to non-IE browsers */
	background: url(http://domain.tld/path/image.png) no-repeat;
}
* html .png a {
	/* make links clickable in IE */
	position: relative;
	z-index: 999;
}

Once in place, this chunk of CSS enables IE (versions 5.5+/Win) to display transparent PNGs for any PNG images associated with the “.png” class.

To use this code for background images, edit the image path/name to match your own and ensure that the .png class is included in the markup. For inline images, the second code block (i.e., .png[class]) may not be necessary. Here are a few more potentially useful considerations:

• For best practice, include this code via conditional comment in an IE-specific stylesheet.
• Alternatively, you may want to use the * html filter to keep the rules from interfering with other browsers (may affect performance).
• This method will not work for background images that have been positioned in any way or set to repeat in any direction.
• If the target PNG images fail to display properly, try replacing the sizingMethod='fixed' parameter with either sizingMethod='crop' or sizingMethod='scale'.
• The last code block (i.e., * html .png a) is required only if there are links within the target element.

Alternate Method

An alternate approach to displaying transparent PNGs in IE involves placing the following code directly into your CSS file:

* html img,
* html .png {
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Of course, you will probably want to include this code via conditional comment and an IE-specific stylesheet:

<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="http://domain.tld/path/png_fix.css" />
<![endif]—->

A few notes should you decide to go this route:

• Invalid CSS
• Works well only for statically displayed images.
• Requires a transparent 1px-square GIF image.
• Non-repeating backgrounds should be sized to “crop”, others should be sized to “scale”.
• As-is, this CSS expression is very resource-intensive, so..
• USe this.runtimeStyle.behavior="none" to ensure the function is executed only once.

JavaScript Method

There are several JavaScript techniques for applying the AlphaImageLoader transparency filter to target PNGs. One of the more popular methods is the SuperSleight method. SuperSleight solves many of the problems typically associated with previously discussed methods:

• Valid CSS — requires no special CSS.
• Unobtrusive functionality — exclusively targets deficient versions of IE.
• Improved performance — the function can be executed throughout the entire document or only in specified page regions.
• Clickable links, focusable forms — optional automatic application of position: relative to links and form fields.
• Automatic sizing method — detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
• Applied to new content — automatically applied to any newly added content, such as that loaded via Ajax requests.
• Replaces previous versions — works with both inline and background images, replacing the need for both sleight and bgsleight.
• Web Standards — complete separation of structure, presentation, and behavior.

The downside to this method is that JavaScript must be available in order for it to work. Other than that, the technique is nearly perfect, addressing nearly all of the shortcomings of previous methods. To use this method, download the Supersleight script and a transparent GIF, upload the files to your server, and include the function via conditional comment:

<!--[if lte IE 6]>
	<script type="text/javascript" src="http://domain.tld/path/supersleight.js"></script>
<![endif]-->

..and that’s all there is to it. No need to mess with class names, alternate images, or specific attributes. Supersleight does all the work by traversing the DOM and applying the required filters via pattern matching. Completely unobtrusive and awesome.

Other Methods

As mentioned, there are many currently available PNG hacks for Internet Explorer. Here are a few of them:

• PNGHack
• PNG transparency issues
• IE6 PNG Transparency Fix with Javascript v2.0
• The Different Techniques for Applying the PNG Hack

Let me know of any others that should be added to the list!

Coming Next..

In the next fascinating CSS Hackz Series: The ubiquitous Clearfix Hack!

Stay tuned..

Footnotes

• ¹ As far as I know. Let us know if you have an alternate technique!
• ² Rumor has it that the transparent GIF file is not needed for CSS background images.

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.