PNG transparent images in IE

johnny0313x · 02-26-2009, 03:51 PM

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

BoldUlysses · 02-26-2009, 03:57 PM

You don't have to revert to GIFs. You'll have to use a little bit of JavaScript to get alpha-channel transparency (the kind PNGs use) to work in IE6.

johnny0313x · 02-26-2009, 05:39 PM

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 · 02-26-2009, 06:07 PM

Negative. If a user has JavaScript 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 layout in conjunction with a 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:

Code:

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

and

Code:

#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.