PNG Transparencies in CSS

[shifty]

I'm currently using PNGs as background images through CSS for my page elements. However, although these work fine in Firefox, IE does not support them.

Gifs are too low quality, Jpegs are not transparent.

I have worked around the problme before by issuing the background edges of the transparent images as the same colour of the backgound on which they are displayd on, however, this is becoming more painful when I want image placed against gradiant backgrounds.

What is the solution here?

[moojoo]

There are various "Hacks" to make PNG's work in IE and IE 7 does have Png support. So soont he problem will be much less of a problem. Until then google around for a trick.

[shifty]

Originally Posted by moojoo

There are various "Hacks" to make PNG's work in IE and IE 7 does have Png support. So soont he problem will be much less of a problem. Until then google around for a trick.

Googling around only seems to find IE hacks when using them as HTML IMGs, not CSS background-images.

[moojoo]

Maybe this will help?

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

You can use CSS filters to get the PNG support working.

[shifty]

Originally Posted by moojoo

Maybe this will help?

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

You can use CSS filters to get the PNG support working.

Thanks Moojoo - a comprehensive hack, although I was looking for something a bit more practical and simple.

I only just found out that 8-bit PNG transparencies ARE supported in IE, although look a bit ropey. This will do for nnow unless there is something better anyone?

[moojoo]

When it comes to IE and its suck nothing is practical or simple.

[Ryan Fait]

When it comes to IE and its suck nothing is practical or simple.

Haha. This is true.

I had the same problem a while ago, shifty. I ended up ditching the idea and going for an alternative design. It's mostly because I hate hacks, but in the long run, I'm glad I dropped it.