subtleGradient

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

by Thomas Aylott Wed, 30 Nov 2005 10:18:00 GMT

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.

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

• this method effectively replaces the use of PNGs for background images that don’t tile.
• this method is useless against embedded img tags in the content

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

• This method won’t work with background for CSS background images
• You must update your servers mime types list to serve .htc files as text/x-component .htc

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 Improved PNG Behavior or the original WebFX PNG Behavior

PNG_transparency_demonstration_1.png Image taken from wikipedia