ie 6 png fix – ie 6 png issue solutlion with css and/or js

The issue is with png type of images that are not properly displayed in ie 6 (internet explorer – Version 6). I found the solution somewhere on internet while googling.

Okay, so the solution goes as below:

1) download the files needed for the solution from http://demo.avidindiainc.com/ie6pngfix/ie6PNGFixDownload.zip

2) There are 5 files in the directory after you unzip it. They are  blank.gif, iepngfix.htc, iepngfix_tilebg.js, iepngfix.php and .htaccess.

3) for solving the issue the two files blank.gif and iepngfix.htc are enough. i will explain them first and we’ll go for the rest files later.

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

5) Copy and paste this into your website’s CSS or HTML:

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

6) now the other  files work as follow. 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>

7) Suppose if it works offline but not online, in this case you may have a MIME type problem. You must ensure your server is sending the correct MIME type of “text/x-component” for .HTC files. Try one of these two easy fixes:

  • Upload the “.htaccess” file from within this script’s download ZIP to your webserver, which will make Apache send the correct MIME type.
  • Instead of calling “IEPNGFIX.HTC” from your CSS, upload IEPNGFIX.PHP to the same folder and call that instead, which also sends the right MIME type.

Thats all folks. I hope this solves your issue with ie6.