png support problems

[ejewels52]

Hello-
I'm sure this has come up, but I can't get a png to work in IE 5.5-6. I tried different fixes but it won't work. My image is in the CSS as a background image...and that is the problem...here is my CSS code:

Here is my CSS:

#wrapper {
position: absolute;
left: 50%;
width: 774px;
height: 556px;
margin-left: -387px; /*set to negative number 1/2 of width*/
background-image:url(images/shadow_bg.png);
background-repeat:no-repeat;
background-position:bottom;
}

Can anyone tell me how to make a png used in a style sheet? All I can find is fixes to png's within the actual html...thanks in advance...

[mwinter]

I'm sure this has come up, but I can't get a png to work in IE 5.5-6.

Is this a PNG that uses alpha transparency? That is, one capable of translucency, not just opaque/fully-transparent?

MSIE doesn't support PNG images properly prior to version 7. There is a scripted hack that uses the AlphaImageLoader filter, but one cannot entirely depend on it.

As a compromise, if you can engineer a GIF or PNG that only uses single-colour transparency, then that could be served to IE based on the Accept HTTP header sent in the request, provided you have a server-side programming language like PHP available.

Mike

[ejewels52]

Thanks for the response Mike,
Yes, it is a drop shadow with transparency. Can you tell me how to do this AlhphaImageLoader thing? Its just for my portfolio site, so not too concerned if it isn't completely reliable...I'm fairly new with CSS...thanks, Eric

[mwinter]

Yes, it is a drop shadow with transparency. Can you tell me how to do this AlhphaImageLoader thing?

I'm afraid it won't be suitable for that: the image can't be positioned, unlike a background image.

If you can't use single-colour transparency, you'd be better off reproducing the image with the background colour already blended into the shadow. That, or hide the shadow from IE6 and earlier, if the document looks good enough without it. Users of IE7, Opera, Firefox, and other decent browsers will still render it properly.

Mike

[windowpane]

Hi,
There is a javascript function that I use for fixing transparent png files problem. It works fine on single color background.
Just visit;
http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

[Twey]

There is a scripted hack that uses the AlphaImageLoader filter, but one cannot entirely depend on it.

Scripting is not a solution. Also, that fix is simply a Javascript method to automatically apply said filter, so suffers from the problems Mike described.

[mwinter]

There is a javascript function that I use for fixing transparent png files problem.

...

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Except that's designed for foreground images - img elements.

Mike