Displaying PNG’s in IE - Inline vs External CSS
According to Microsoft support , correctly displaying PNG’s in Internet Explorer should be as simple as copying & pasting their example. This is the CSS that Microsoft claims will correctly display :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
The above code will work for inline CSS, that is, CSS mixed with HTML:
<div id="png_bg" style="position:absolute; left:140px; height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.png', sizingMethod='crop');" >
</div>
If you don’t want to mix your CSS with your HTML, external style sheets are the obvious choice. However the above example won’t work in an external style sheet. Instead, the path to image.png needs to be absolute, like this: /direct/path/to/image.png
Your external style sheet would look something like this:
#png_bg {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/path/to/image.png');
}
Shout at me if I got this all wrong.
