The New IE PNG Fix

I have been using the iepngfix.htc tool for years, allowing me to correct IE6s lack of support for alpha transparencies in PNGs. The tool is called via a CSS behavior, which loads the HTC file containing JavaScript that searches the CSS for PNG backgrounds and automatically applies the IE6 transparency filter. So once the page loads, the PNG background images are corrected. There is a slight flicker as the correct happens, but it is either that or maintain two sets of images, one for every other browser, and one for IE6. Frankly, I choose to optimize for the 90% of users.

However, this tool has always had two major drawbacks: 1) when the HTC file works its onload magic, all background positioning of your transparent PNGs is ignored; and 2) any content dynamically added to the DOM will not have the filter applied. Personally, I found the 2nd to be more of an issue, but the 1st problem prevents designers from spriting their graphics.

Fortunately, Angus Turnbull of TwinHelix, author of iepngfix, recently (v2.0 alpha 3) fixed the shortcomings of the HTC file, by adding an additional JavaScript file to be included as well. This JavaScript file includes an "IEPNGFix.update" function that corrects the background position of PNGs and it can be used to apply the filtering to dynamically added DOM content. Natively, "IEPNGFix.update" is only called on a window resize, however, once you have included it in your project, you can call it whenever you need to.

Example 1: Calling IEPNGFIX.update

if (window.IEPNGFix && IEPNGFix.update) {IEPNGFix.update();}

Use the code snippet from Example 1 anytime you have added elements to the DOM with a transparent PNG background and/or you have adjusted the background position of any transparent PNG. Now, even in IE6, you can have your have your cake and eat it too.

Below are some additional examples on how to include the HTC and JavaScript files in your code:

Example 2: HTML > Head

Example 2 will include your IE hack CSS and the iepngfix_tilebg JavaScript anytime it encounter a version of IE that is less than 8. You could adjust this to be less than 7, if you only want to target IE 6 and lower.

Example 3: Behavior CSS

* html .iepng {
	behavior: url(pathFromHTMLFileToHtc/iepngfix.htc);
}

If you include Example 3 in your IE hacks CSS, then it will apply the IE PNG fix logic to any element with the className iepng. You can add any specificity you want, but I prefer to explicitly determine what elements have this behavior applied to them. Lastly, the path to your HTC file should be from the directory that serves the HTML file, not the directory of the CSS file, because that is how IE transverses directories when applying filters.