IE 6 issues of png image in background

Question

Hi,

I am having issue with png image on IE6 and tried to search every where but no success. I am using this css code for displaying png image .Is there any problem. Please let me now.

.bottom-box {
    width: 210px;
    float: left;
    margin:5px;
    position:relative;
    padding: 5px;
    text-align:left;
    height: 150px;
    min-height: 150px;
    background-image: url(/images/trans-box.png);
    color: #FFF;
    line-height: 20px;
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/trans-box.png', sizingMethod='scale');
}

Thanks! In advance.

Answer 1

IE6 hates pngs, it's a sad fact... but you should try using conditional comments instead of that underscore hack... edit your CSS to be:

.bottom-box {
    width: 210px;
    float: left;
    margin:5px;
    position:relative;
    padding: 5px;
    text-align:left;
    height: 150px;
    min-height: 150px;
    background-image: url(/images/trans-box.png);
    color: #FFF;
    line-height: 20px;
}

Then in the HEAD of your HTML add in:

<!--[if lte IE 6]>
<style>
.bottom-box{
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/trans-box.png,
sizingMethod='scale');
}
</style>
<![endif]-->

Or you could just use a GIF or something just for ie6, using hacks/conditional comments. The filter: property is IE-specific BTW.

you could also try the star hack, instead of the conditional, edit your CSS as above but add this rule:

* html .bottom-box{
    background-image: none;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/trans-box.png,
    sizingMethod='scale');
}

since it is technically valid CSS it might work better.

Also it's probably useful to know that IE6 & this PNG fix won't work with background-position or background-repeat. it will not tile PNGs as backgrounds, so again I'd suggest using a gif or something for IE6.

Answer 2

IE6 does not support PNG transparency directly, but you can hack it in via a CSS filter. But, thankfully, there's no need to do it yourself. A fix that works automatically (and very well) is available at http://www.twinhelix.com/css/iepngfix/. Installation is simple and will dynamically add the appropriate directX filter commands to any PNG images in your page.

The only drawback is that, since this fix applies AFTER the dom is loaded, there will be a short period when the PNG un-transparency will be visible, so there's a brief flash of ugliness before things start looking as expected.