Get IE 5.5+ to support transparent PNGs using Microsoft-chow
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
- this method effectively replaces the use of PNGs for background images that don’t tile.
- this method is useless against embedded
imgtags in the content
Example:
#search-results1 a, #search-results1 a:link, #search-results1 a:visited {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://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
.htcfiles astext/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 >PNG Behavior
or the original "WebFX PNG Behavior ":https://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
PNG_transparency_demonstration_1.png Image taken from wikipedia