Monday, May 25, 2009

PNG Tranparency in IE6

1 . First Download this Zip file and unzip

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

3 . 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>
4 . 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:
IEPNGFix.blankImg = '/images/blank.gif';
Again the path is relative to the HTML file. Otherwise, you will see a "broken image" graphic!

5 . If you want support for CSS1 background-repeat and background-position, make sure you include the add-on .JS file in your <head>:
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
Otherwise, background images will work but won't repeat or position.

You can view two other methods at
http://jquery.andreaseberhard.de/pngFix/
http://koivi.com/ie-png-transparency/