Monday, December 22, 2008

Transparent PNG in IE6 with CSS Hacks

IE6 is evil for web developers, we all know about PNG transparency and its problems with IE6.

Say your CSS code looks like this:
#logo { background: url(images/logo.png) no-repeat left top;}
Next, we would follow that with an IE-specific hack.
As it turns out, IE5.5 and IE6 think that it’s possible have an element above the HTML element. Fortunately, all other browsers on the planet know better, so they skip the next rule because it says: For all elements (*) with this selector path starting above the HTML element, do this.
And this is where we’d add our IE-specific alpha transparency filter.
* HTML #logo {/* PNG Alpha IE Win ONLY */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.png', sizingMethod='scale');}
What we’ve done here is display a transparent PNG natively in all browsers except for IE6, and displayed the same graphic via a proprietary alpha filter only in IE6.
Another way to fix the problem.


Post a Comment