The Naked Green

2005.2.26 Saturday

PNG Transparency in IE

Filed under: Web Design — Mr. Green @ 10.19 pm

It’s yet another post about long hours trying to trick Internet Exploder into working. I worked on Jamie’s blog or a while today to implement a newish design and learned some tricks, too.

Thanks to LPD, I have found a new solution (if you can call it that) to the lack of PNG transparency support in IE instead of using filter: alpha(opacity=60) which ends up washing out the colors of the PNG image.

This hack uses the horrid looking, non validating filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='75p_honey.png'); to accomplish this simple feat (simple in Firefox, that is). Of course, then you must hide the actual background-image: url(/folderto/sample.png);, so we use #content[id] to hide it from IE. Simple, isn’t it? Well, that lovely hack job makes links all but useless in IE (you see them, but they don’t work). So, for some reason only old Billy knows, you have to add position: relative to all child elements (#content *). Here is a sample:

#content {
padding: 0.5em;
margin-left: 5px;
width: 66%;
color: white;
border: thin solid #99FF66;
margin-bottom: 10px;
filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(enabled=true, sizingMethod=scale, src=’/images/green.png’);
}
#content[id] {
background-image: url(images/green.png);
}
#content * {
position: relative;
}

The image sample doesn’t work in IE (the code will) because I’m not going to take the time or effort to have such hacks ruining my CSS. So, get a better browser!

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Powered by WORDPRESS