Hello Everyone... I'm new to the forum.

Firstly, I apologize if this topic has been covered in here at length but I'm having a hard time debugging my site for IE6. I'm relatively new to designing with web standards. This is the 2nd full website I've designed using XHTML and CSS.

http://www.unleashedpetshop.com/

Everything looks beautiful in Firefox, Safari, Opera, IE7 & 8. However 40% of my traffic uses IE6 and that browser renders is horribly.

It's rendering in IE6 like this:
http://www.unleashedpetshop.com/images/ie6_screenshot.png

I've read about a number of IE CSS hacks but I'm not sure which ones I should apply to my site and specifically where to apply them to get it to render properly in IE6.

I'd rather not do anything that will cause my code to not validate. If anyone could help steer me in the right direction I'd really appreciate it!

Thanks,

Justin

Thanks for your help!

Yea, looks like the slider is the culprit. I tried removing the comments but it still breaks the layout.

When I removed the entire thing is rendered correctly:
http://www.unleashedpetshop.com/images/ie6_screenshot_noslider.png

Is there something I can do to get the slider to function in IE6? Or is it not supported?

IE6 doesn't like my transparent PNGs either. I came across a couple solutions for this somewhere but i'm not sure which one to use. Anyone have any experience with this?

And for the alpha transparency, you could save the images as png8 with an alpha channel, which degrades beautifully on IE, if you have Fireworks installed. If not, I've found the TwinHelix fix to be quite good: http://www.twinhelix.com/css/iepngfix/ />
I'm using that one here http://www.saimaansaunaseura.fi/ - you'll have to be on a really slow connection to notice the fix.