advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

jonhenshaw on 03/07/07


Tagged

fix hack ie png transparency


Versions (?)


Who likes this?

13 people have marked this snippet as a favorite

jonhenshaw
indianocean
basicmagic
noah
shellydennison
DataSquirrel
d10018
marcoba
heinz1959
aziz
visuallyspun
Morgano
rouxmout


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.


Plain TextExpand 
  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 

You need to login to post a comment.