What's the best way to getting around the problem that ie6 has with not displaying transparency on PNGs?

 

I've Googled this and found some hacks but I'm wondering if there is a semantically correct way of achieving it.

take one step back and ask whether you really need to support IE6?

I would probably say not but I'd like to and I'd rather know how to deal with I6 problems that not. I know support for it is getting lower and lower but I feel it's something that I should know just in case.

pngfix will do it

Cheers, I'll take a look.

pngfix will definitely work.

 

You can also use an 8-bit PNG, transparency works in IE6 though the quality is kinda crummy.

 

EDIT: You can also create an IE6 specific stylesheet and use JPGs instead. Or just let the elements that need transparency degrade gracefully into something else. Things don't really have to render identically across all browsers, it's not practical.

Edited May 14, 201115 yr by porkchops

I did try with 8-bit but like you said, the quality just isn't good enough.

 

I did also think about doing a separate stylesheet for IE. I think that's probably the route I'm going to take.

Things don't really have to render identically across all browsers, it's not practical.

 

+1 for this. People spend far too much time trying to make their design look the same in all browsers. It's not worth the effort - as long as it is usable and attractive in all the browsers you want to support then you are fine.

 

http://www.alistapart.com/articles/understandingprogressiveenhancement/

hi,

please use this header-top, #header .row-2 .fleft img replace with class name

for ie 6 and 7

<!--[if lt IE 7]>

<script type="text/javascript" src="js/ie_png.js"></script>

<script type="text/javascript">

ie_png.fix('.png, .header-top, #header .row-2 .fleft img');

ie_png.fix('.png, .header-top, #header .row-1 .fleft img');

</script>

<link href="ie6.css" rel="stylesheet" type="text/css" />

<![endif]-->

files are attached

and use in header

thanks

a1visions