Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

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 filter1. 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 file2 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.cssCSS 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:

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

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

Jeff Starr
About the Author Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Archives
20 responses
  1. Dejan Cancarevic May 28, 2008 @ 8:57 am

    thanks for mentioning me

  2. Jeff Starr

    My pleasure, Dejan! I only wish I had the time (and stamina) to cover more methods in depth. Yours would have definitely been included. Keep up the great work! :)

  3. Andreas Stephan June 2, 2008 @ 1:41 am

    Nice sum up!
    Just be careful using this “hack”! Especially if you apply it inside javascript using expression, it can slow down the site a lot! If you need many pngs on your site, consider using png8 instead of png32 like described here: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
    IE6 won’t display it as nicely of course but you wont need hacks or custom css, AND: IE6 is the new NS4 and thus dying out (hopefully very soon) ;)

  4. Jeff Starr

    Hello Andreas! Thanks for the sweet tips. I was under the impression that JavaScript implementations of the AlphaImageLoader transparency filter have much less of a negative impact on performance than do CSS-based expressions. Also, using a script such as Supersleight, it is possible to target specific areas of the page to further improve performance. Nonetheless, I completely agree with you that people should be careful when hacking for IE-PNG support. The whole mess is really dodgy to begin with, and I hold hands and pray along with the untold masses that look forward to the soon extinction of the horrid IE6 browser ;)

  5. August Klotz June 8, 2008 @ 8:38 am

    I read somewhere that including this CSS code at the very top of an imported stylesheet will enable proper display of PNG-32 translucency in Internet Explorer 6.

  6. Andreas Stephan June 9, 2008 @ 12:14 am

    @August: Never heard of that before. I doubt that thats true too, otherwise it would be a well-known solution.

  7. Jeff Starr

    Yes, that is a good point, Andreas. That technique would be all over the Web in a matter of days if it actually worked. So far, I have only seen one other instance of it (in the comments of a Site Point article on PNG-8). Nonetheless, it wouldn’t surprise me if nobody has actually tested it, so it shouldn’t be shrugged off completely until somebody takes the time to do so (and it won’t be me!).

  8. jitendra vyas November 25, 2008 @ 11:44 pm

    i want to use png without javascript with valid css and html too. then which is best ?

  9. Jeff Starr

    @jitendra vyas: unfortunately, all of the “quick-fix” methods (such as the ones described in this article) require JavaScript. Some methods place it in the CSS, and others keep it entirely in an external file. Either case, it’s still JavaScript. IE support of true, alpha-transparent PNG-24 format is just not possible without JavaScript.

  10. Thank you so much, I searched for hours to solve an issue relating to a collapsible/animated accordion and this post solved the issues. It was clear and concise and worked really well.
    Ollie

  11. Jeff Starr

    My pleasure, ollie –thanks for the positive feedback! :)

  12. Hi, I tried opening this site in ie6 and I see there are some issues with it. Please check..

[ Comments are closed for this post ]