PNG transparent problem in Internet Explorer 6

Everybody knows about PNG-24 problem in the Internet Explorer 6. I have found the best solution on this site http://www.twinhelix.com/css/iepngfix/. This method uses Javascript to fix problem. I think it will help you.

But for some reasons, sometimes this script does not work correctly on my server . I really don’t understand why.

So, I use next solution to solve the problem.

Let’s look at the next example.

Save this code to your style-ie.css file:

#logo{
	behavior:expression((this.runtimeStyle.behavior="none")&amp;&amp;(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" &amp;&amp; this.src.toLowerCase().indexOf('.png')&gt;-1?(this.runtimeStyle.backgroundImage = "none",
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
	this.src = "blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
	this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
	);
}

Important! You need to create transparent image and save it as blank.gif to same folder where style-ie.css. is saved. You can make blank.gif 1px to 1px.

This code will work for IMG tag and for CSS background style.

But if you use background and repeat method, you need to create a new style for repeated backgrounds.

For example:

#header{
	behavior:expression((this.runtimeStyle.behavior="none")&amp;&amp;(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" &amp;&amp; this.src.toLowerCase().indexOf('.png')&gt;-1?(this.runtimeStyle.backgroundImage = "none",
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
	this.src = "blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
	this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
	);
}

The code is the same as above for #logo, I changed only this part

1	sizingMethod='crop'

1	sizingMethod='scale'

And the last important thing – #header must to have width value in CSS file.

For example:

1
2
3

#header{
	width:100px;
}

1
2
3

#header{
	width:100%;
}

You could download an example here.

By the way, please, read this post to know how to use PNG transparently without Javascript in IE6

Thanks.

PNG transparent problem in Internet Explorer 6

Comments (2)

Leave a Reply

Categories

Latest Posts

Latest Tweets