Easy and Efficient IE PNG Fix // 8.19.09

No doubt that if you are designer/developer, you have scoured the web and tried a handful of IE PNG fixes, only to be dissapointed. The .png fix offered by the folks at TwinHelix. They offer a number of very useful products, but none better than their IEPNGFix v1.0 / v2.0a3.

Once you download the zip, there is an HTML file there that gives a step-by-step guide on how to use the files;

1. Copy and paste iepngfix.htc and blank.gif into your website folder.

2. Copy and paste this into your website’s CSS or HTML:

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

That CSS selector must include the tags/elements on which you want PNG support — basically, give it a comma-separated list of tags you use. It must also include the correct path to the .HTC relative to the HTML document location (not relative to the CSS document!). For instance, yours may look like this:

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

3. If your site uses subfolders, open the .HTC file in a text editor like Windows Notepad and change the blankImg variable to include a correct path to blank.gif like so:

var blankImg = '/images/blank.gif';

Again the path is relative to the HTML file. Otherwise, you will see a “broken image” graphic!

About the author: Stu Belshe
Designer, developer and online strategist. You can follow me on Twitter

Leave a Reply