Get IE 5.5+ to support transparent PNGs using Microsoft-chow

Get IE 5.5+ to support transparent PNGs using Microsoft-chow -- read more

There are two ways that i use to solve the transparent PNG support issue.

Before we get into those specific methods, we have to make sure only IE is getting fed Microsoft-chow.

Read the rest of the article for the specifics.
h2. For IE’s eyes only

Use a dedicated hacks_for_ie.css file and serve that css file via conditional comments


<!--[if IE 5]>
  <link href="/stylesheets/theme/subtletheme_IE5.css" media="screen" rel="Stylesheet" type="text/css" />
<!--[if gt IE 5]>
  <link href="/stylesheets/theme/subtletheme_IE55.css" media="screen" rel="Stylesheet" type="text/css" />

For non-tiling transparent background image PNGs

Use a proprietary Microsoft filter property


#search-results1 a, #search-results1 a:link, #search-results1 a:visited {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='crop');

For img tags in the content

Use a proprietary Microsoft .HTC file to dynamically adds a JS behavior to every img tag that is a PNG. It replaces the source of the items with a spacer.gif


img {
   behavior: url("");


For more info on conditional comments check out

For more info on the wacky Microsoft-chow AlphaImageLoader and friends, check out MSDN – AlphaImageLoader Filter

For more info in the method, or to download the file, check out >PNG Behavior
or the original "WebFX PNG Behavior ":

PNG_transparency_demonstration_1.png Image taken from wikipedia