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

Example:


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

For non-tiling transparent background image PNGs

Use a proprietary Microsoft filter property

Example:


#search-results1 a, #search-results1 a:link, #search-results1 a:visited {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://subtlegradient.com/images/theme/article.png', 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

Example


img {
   behavior: url("pngbehavior.htc");
}

References

For more info on conditional comments check out quirksmode.org

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

For more info in the pngbehavior.htc method, or to download the pngbehavior.htc file, check out >PNG Behavior
or the original "WebFX PNG Behavior ":http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

PNG_transparency_demonstration_1.png Image taken from wikipedia