Caveats to Internet Explorer PNG transparency bug

.png_image {
  background: url('/img/some_image.png') no-repeat;
  z-index:10;
}

* html .png_image {
  background: url('');
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='/img/some_image.png');
}

If you’re using the above hack to handle Internet Explorer 6 PNG fix, and you’re still seeing some light blue parts, check the following things:

  • The name of the class is the same in all the places you’re using it (in the div or img tag where you need the image, the “* html .png_image” class line and the “.png_image” class line)
  • The above CSS must be included in the HTML body/head using <style> tags. Do NOT include from an external file.
  • The path of the image is correct in both CSS definitions.
  • If you are trying to apply this hack to an <img> element, try to use a transparent pixel for <img> and set the png image from css. The image from img source is rendered above the image from css source.