Hello, please sign in or register
You are here: Home

Provide PNG alpha transparency support in IE6

Native IE6 does not support PNG transparency. This article covers tolerable solutions.

The CSS expression

IE supports behaviour and expressions in CSS code. Here is a solution where transparency is added all items with the class name "png"

/*******************************
 * PNG fix
 * This fix is viewable only to <= IE6 which is where the problem lies.
 * NOTE:
 * The position must be set to 'relative'
 * This should not be exposed to IE7, be warned.
 *******************************/
a, input{
	position:relative;
	zoom:1;
}
* html img, * html .png, * html #id_of_element_with_png_background{
	behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "../graphic/34_transparent.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)
);
}

 

Comments

Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share