2010-08-11 // 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-repeatandbackground-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).
- The flexibility forces you to read the manual the first time you use it.
Unit PNG Fix
Pros:
- Relatively light weight
- Very easy to apply, simply set the JS
var clear=“path/to/clear.gifand 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
var clear=”“ in the file unitpngfix.js got a usable valueimg, div, a, input and td. All CSS selectors supported by MSIE 5.5/6 do work to define the target elements.Leave a comment…
- 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.
