CSS Transparent PNG Image Fix for Internet Explorer 6
Hello, this page demonstrates the tried and tested CSS method to enable Internet Explorer 6 to effectively use transparent PNG images.
2 examples of this method are shown - one for background images referenced in a stylesheet (or the head of an html document), and the other for inline images embedded in a page.
I am not the author of these methods and nor am I a guru on the subject - they are the work of others and are presented here as I hadn't seen the background and the inline transparent PNG image CSS fixes on the same page before.
These fixes exclusively use CSS - no Javascript is required. You do have to repeat the "IE6 filter insert" for each and every PNG image on your site so if your site features a lot of png images, perhaps a javascript fix would suit you better.
Hope you find this helpful - you can stop pulling your hair out now.
CSS Transparent PNG Background Image Fix for Internet Explorer 6
I am not sure who the brains is behind this technique but I do remember stumbling upon it somewhere on the web.
Example:
CSS:
<style>
.bgImg { width: 150px; height: 150px; display: block; position: relative; }
.bgImg[class] { background: transparent url(circle01.png) top left no-repeat; } /* IE6 ignores this*/
</style>
IE Conditional Statement for head:
<!--[if lt IE 7]>
<style>
.bgImg { background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='circle01.png'); }
</style>
<![endif]-->
HTML:
<div class="bgImg"></div>
CSS Inline / Embedded Transparent PNG Image Fix for Internet Explorer 6
I found the inline image solution on this page.
Example:
CSS:
<style>
.inlineImg { width: 150px; height: 150px; display: block; position: relative: }
</style>
IE Conditional Statement for head:
<!--[if lt IE 7]>
<style>
.inlineImgFix { background: none; padding-top: 150px; overflow: hidden;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='circle02.png'); }
</style>
<![endif]-->
(NB. padding-top is important and should equal the height of the PNG)
HTML:
<div id="inlineImg">
<a href="#"> <img class="inlineImgFix" src="circle02.png" /> </a>
</div>