views:

183

answers:

3

I've tried jquery.pngFix.js and pngfix.js and neither seem to cater for all issues.

Any images that are anchored end up distorted with the former and the latter doesn't like positioned/repeating background images.

Unfortunately the design I'm working on calls for PNGs to be used in the way I have done, so I'm not really sure where to go from here?

+4  A: 

google for DD_belatedPNG - this is the best one I have seen

matpol
http://www.dillerdesign.com/experiment/DD_belatedPNG/
Andy Ford
Yup, got it and it's all running smoothly now. Thanks for the help. :)
JFK1980
+1  A: 

You can check out this site for a decent fix:

http://www.greyhats.com/tech/a-better-ie6-png-fix-37

I have used that successfully, with some caveats. You can't make the image tile, which is a deal-breaker for some uses.

Robusto
Unfortunately the repeating background is something I need.
JFK1980
+1  A: 

The ways I deal with transparent pngs and IE6 are:

  • Make the transparent color of the png the background color of your site. Works best for things like rounded corners, drop shadows and elements that overlay the background only.

  • If the background is a gradient or image, replace the png with a gif in your IE6 stylesheet. This is very easy if you are using sprites for background images. The rounded corners may not be as smooth in IE6 as other browsers but I consider that an acceptable trade off.

  • If I really need a javascript solution, I use DD_belatedPNG

Emily
Unfortunately none of those tricks can be used as the design is quite complex. I don't bother with trying to compensate for rounded corners in IE, I just allow it to degrade gracefully and use proper CSS rounded corners for the "real" browsers.I've used GIFs where I can, but still stuck on a few images that need to be PNGs.I'm giving DD_belatedPNG a go and will have to compromise when it comes to anything that doesn't work. Already spent far too much time trying to keep the client happy on this one.
JFK1980