Advanced Search

Transparent PNG Fix for IE 5.5 & 6

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.