// 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:

  • Almost perfect results
  • Extremely flexible, you decide by CSS on which elements the fix should be applied
  • Very small
  • PNG CSS background support, including background-repeat and background-position

Cons:

  • Relatively heavy in terms of CPU usage and rendering speed (but if you only need it for a few elements, this should not be a problem).
  • Has to be located on the same domain as the website you want fix (=no CDN), otherwise MSIE may block access to it.4)
  • The flexibility forces you to read the manual the first time you use it. :-P

Unit PNG Fix

Pros:

  • Relatively light weight
  • Very easy to apply, simply set the JS var clear=“path/to/clear.gif and include the fix via conditional comment.
  • PNG CSS background support, including background-repeat

Cons:

  • Does not work in every case, even 100% valid layouts may get really destroyed or it does not work on every page load.
  • No support for CSS background-position

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
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.

Leave a comment…




U​ D I B K
  • E-Mail address will not be published.
  • Formatting:
    //italic//  __underlined__
    **bold**  ''preformatted''
  • Links:
    [[http://example.com]]
    [[http://example.com|Link Text]]
  • Quotation:
    > This is a quote. Don't forget the space in front of the text: "> "
  • Code:
    <code>This is unspecific source code</code>
    <code [lang]>This is specifc [lang] code</code>
    <code php><?php echo 'example'; ?></code>
    Available: html, css, javascript, bash, cpp, …
  • Lists:
    Indent your text by two spaces and use a * for
    each unordered list item or a - for ordered ones.
I'm no native speaker (English)
Please let me know if you find any errors (I want to improve my English skills). Thank you!
QR Code: URL of current page
QR Code: URL of current page 2010:08:11:fix-msie6-png-alpha-channel-transparency (generated for current page)