Transparent PNG Fix for IE 5.5 & 6


 / Published in: CSS
 

URL: http://www.twinhelix.com/css/iepngfix/

This is an excellent solution for fixing IE 6's inability to display transparent PNGs correctly.

Step 1: Include the following conditional comment the HEAD area of your document. You will need to update the CSS selector and also the path to whereever you put the .htc file.

<!--[if lte IE 6]> <style type="text/css">   img { behavior: url(/css/iepngfix.htc) } </style> <![endif]-->

Step 2: Create a transparent GIF that's 1x1 and save it as blank.gif in your images folder.

Step 3. Copy the source below and save it in a file called iepngfix.htc and place it in your CSS folder. Note, you may need to update the images folder to match the folder you're using on your site.

That's it. Once you have everything in place and assuming everything is referenced correclty, PNG transparency will work in IE 6.

  1. <public:component>
  2. <public:attach event="onpropertychange" onevent="doFix()" />
  3.  
  4. <script type="text/javascript">
  5.  
  6. // IE5.5+ PNG Alpha Fix v1.0RC4
  7. // (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
  8.  
  9. // This is licensed under the CC-GNU LGPL, version 2.1 or later.
  10. // For details, see: http://creativecommons.org/licenses/LGPL/2.1/
  11.  
  12.  
  13. // This must be a path to a blank image. That's all the configuration you need.
  14. if (typeof blankImg == 'undefined') var blankImg = '../images/blank.gif';
  15.  
  16.  
  17. var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
  18.  
  19. function filt(s, m)
  20. {
  21. if (filters[f])
  22. {
  23. filters[f].enabled = s ? true : false;
  24. if (s) with (filters[f]) { src = s; sizingMethod = m }
  25. }
  26. else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
  27. }
  28.  
  29. function doFix()
  30. {
  31. // Assume IE7 is OK.
  32. if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
  33. (event && !/(background|src)/.test(event.propertyName))) return;
  34.  
  35. var bgImg = currentStyle.backgroundImage || style.backgroundImage;
  36.  
  37. if (tagName == 'IMG')
  38. {
  39. if ((/\.png$/i).test(src))
  40. {
  41. if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
  42. style.width = offsetWidth + 'px';
  43. filt(src, 'scale');
  44. src = blankImg;
  45. }
  46. else if (src.indexOf(blankImg) < 0) filt();
  47. }
  48. else if (bgImg && bgImg != 'none')
  49. {
  50. if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
  51. {
  52. var s = RegExp.$1;
  53. if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
  54. style.width = offsetWidth + 'px';
  55. style.backgroundImage = 'none';
  56. filt(s, 'crop');
  57. // IE link fix.
  58. for (var n = 0; n < childNodes.length; n++)
  59. if (childNodes[n].style) childNodes[n].style.position = 'relative';
  60. }
  61. else filt();
  62. }
  63. }
  64.  
  65. doFix();
  66.  
  67. </script>
  68. </public:component>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: webdevelopertut on June 29, 2009

Here is a great article to fix png transparency image in ie6 using css

Png fix for ie6 using css

Posted By: neoprolog on August 31, 2009

this method requires to add following line to .htaccess file (Apache Servers)

AddType text/x-component .htc

You need to login to post a comment.