Table of Contents

Fixing the lack of support for transparent PNG images in Microsoft Internet Explorer 6: my favorites

It is an old problem, but still actual: MSIE 5.5/6 does not support alpha channel transparency in PNG (at least in PNG-24). If you google it, you will get many results. The reason why I am blogging about is the different quality and heaviness of the thousands of existing fixes, it is not easy to know which are the good ones if you never used them. Therefore I want to share my personal favorites. I'm creating websites for years now, and there are two freely available fixes which always did the job for me:1)

IE PNG Fix

Pros:

Cons:

Unit PNG Fix

Pros:

Cons:

Best practice

I always try Unit PNG Fix first5) - The needed files are located on our CDN, so I just have to place the following code within the <head>: 

<!--[if lt IE 7]>
  <script type="text/javascript" src="http://cdn.example.com/unitpngfix/unitpngfix.js" charset="UTF-8"></script>
<![endif]-->

Simply test the page afterwards - If everything works and the layout does not get destroyed (this might happen randomly in ~30% of the page loads which is not acceptable for me – try to reload everything as often as possible to be sure everything works), you are done.

If Unit PNG Fix does not do the job, remove it and use IE PNG Fix. This fix worked for me in every case in all the years I am using it. Download and place it on the same host your website is running on (e.g. in the folder /css/resources/) and include it within the <head>: 

<!--[if lt IE 7]>
  <style type="text/css">
    img, div, a, input, td { behavior: url(/css/resources/iepngfix.htc); }
  </style> 
<![endif]-->

You also decide by CSS which elements should be handled by the fix.6) Common PNG transparency should work now. If you additionally need support for the CSS properties background-repeat and background-position, you have to load an additional JavaScript named iepngfix_tilebg.js: 

<!--[if lt IE 7]>
  <style type="text/css">
    img, div, a, input, td { behavior: url(/css/resources/iepngfix.htc); }
  </style>
  <script type="text/javascript" src="/css/resources/iepngfix_tilebg.js" charset="UTF-8"></script>
<![endif]-->

No matter which fix you apply, it is recommendable to place a <noscript> tag within the <body> to inform MSIE 5.x/6 users what is going on: 

<!--[if lt IE 7]>
  <noscript>Your browser has JavaScript disabled, the page layout will be broken. Please enable it and reload this page or <a href="http://browser-update.org/en/update.html">update your browser</a>.</noscript>
<![endif]-->

Weblinks

1)
as long as you as you ignore the flaw that JavaScript has to be active
2)
licensed under LGPL
3)
licensed under GPL
4)
Same origin policy, I think
5)
before you try it: make sure var clear=”“ in the file unitpngfix.js got a usable value
6)
in the example: img, div, a, input and td. All CSS selectors supported by MSIE 5.5/6 do work to define the target elements.