[Case]

Any fixes out there?

Particularly ones that fix the problem when you're setting transparent pngs in your CSS backgrounds.

Cheers

[freelancer]

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

I use this one

[Case]

Thanks, I'll give it a try.

[davewilkinson]

I've used the twinhelix solution on a couple of sites and so far I haven't experienced any problems. There was also a very comprehensive article on Alistapart a couple of years ago but I can't seem to find the link.

[Tjobbe]

I use an ie6 only stylesheet for the recent problems I encountered, maybe this is of use, view source here: holiday-cottage-cotswolds (.co.uk)

note the:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->

Conditional comment in the header.

[tommy]

I use this very small javascript function which works a treat.

http://homepage.ntlworld.com/bobosola/index.htm

[freelancer]

Originally Posted by tommy

I use this very small javascript function which works a treat.

http://homepage.ntlworld.com/bobosola/index.htm

I used to use this Tom, but it doesnt work on CSS backgrounds whereas mine does. It also works on animated (via javascript frameworks like mootools) images too

[tommy]

Originally Posted by freelancer

I used to use this Tom, but it doesnt work on CSS backgrounds whereas mine does. It also works on animated (via javascript frameworks like mootools) images too

I guess as I have never really had a requirement for transparency on background images, I have not run into this problem before.

Thanks for the heads up Ben.

[freelancer]

Originally Posted by tommy

I guess as I have never really had a requirement for transparency on background images, I have not run into this problem before.

Thanks for the heads up Ben.

no probs

[Chameleon]

Create a file called ie6pngfix.htc and keep it in your css folder. Simply call it and put the following code in the ie6pngfix.htc file. It works for IE 5.5 and above.

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'images/blank.png';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s; sizingMethod = m }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
 // Assume IE7 is OK.
 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
  (event && !/(background|src)/.test(event.propertyName))) return;

 var bgImg = currentStyle.backgroundImage || style.backgroundImage;

 if (tagName == 'IMG')
 {
  if ((/\.png$/i).test(src))
  {
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   filt(src, 'crop');
   src = blankImg;
  }
  else if (src.indexOf(blankImg) < 0) filt();
 }
 else if (bgImg && bgImg != 'none')
 {
  if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
  {
   var s = RegExp.$1;
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   style.backgroundImage = 'none';
   filt(s, 'crop');
   // IE link fix.
   for (var n = 0; n < childNodes.length; n++)
    if (childNodes[n].style) childNodes[n].style.position = 'relative';
  }
  else filt();
 }
}

doFix();

</script>
</public:component>