IE6 Transparent PNG problem
We all have faced this problem during HTML development. Internet Explorer 6 renders transparent PNG images in different way. It puts some other color , it damages the design.
One solution is create gif images for IE6 and mention those in separate style sheet file for IE6
|
1 2 3 |
<span style="color: #ff6600;"><!--[if IE 6]>
<link rel="stylesheet" href="css/style-ie6.css" type="text/css" media="screen" />
<![endif]--></span> |
A simpel solution is IE PNG FIX javascript library.
You can download that library from : http://www.twinhelix.com/css/iepngfix/
You can see an online demo and usage here:
http://www.twinhelix.com/css/iepngfix/demo/
Remember to add that htc file inside your style sheet or like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script>
/** transparent png ie fix **/
<span style="color: #bf2e9d;">if</span> (document.all && /MSIE (<span style="font: 11.0px Menlo; color: #2832cf;">5</span>\<span style="font: 11.0px Menlo; color: #2832cf;">.5</span>|<span style="font: 11.0px Menlo; color: #2832cf;">6</span>)/.test(navigator.userAgent) && document.styleSheets && document.styleSheets[<span style="font: 11.0px Menlo; color: #2832cf;">0</span>] && document.styleSheets[<span style="font: 11.0px Menlo; color: #2832cf;">0</span>].addRule)
{
<span style="font: 12.0px Menlo; color: #000000;"><span style="white-space: pre;"> </span>document.styleSheets[</span>0<span style="font: 12.0px Menlo; color: #000000;">].addRule(</span>'.transparent'<span style="font: 12.0px Menlo; color: #000000;">, </span>'behavior: url(css/iepngfix.htc)'<span style="font: 12.0px Menlo; color: #000000;">);</span>
}
/****/
</script> |
I can’t tell you how many times I wanted to use a transparent PNG. I could never get a GIF to look even close. I like the red IE logo too.