PNG transparent images in IE

[johnny0313x]

My PNG transparent images have gray backgrounds in IE6 does anyone know how to fix this? Should I use .gif?

[BoldUlysses]

You don't have to revert to GIFs. You'll have to use a little bit of JavaScript (http://www.twinhelix.com/css/iepngfix/) to get alpha-channel transparency (the kind PNGs use) to work in IE6.

[johnny0313x]

I saw some stuff about that but what if a visitor has java turned off, is there a work around for that? Thank you by the way for replying, I will use this method unless there is a better way to cover all possibilities.

[BoldUlysses]

Negative. If a user has JavaScript (http://www.dannyg.com/ref/javavsjavascript.html) turned off, then you're SOL.

The script works well but isn't totally foolproof, either. I tried to use it recently when making a faux column (http://www.alistapart.com/articles/fauxcolumns/) layout in conjunction with a sticky footer (http://ryanfait.com/sticky-footer/), and the background image I had applied to #wrap and repeated vertically ran over the footer. So in that case I made a special background image for IE6, without the transparency, and resorted to good ol' conditional comments:

<!--[if lte IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" />
<![endif]-->

and

#wrap {
background:url("../images/wrap_bg2ie.png") repeat-y;
}

It's not ideal but the visual difference isn't glaringly obvious. It's a judgment call.