CSS Issue - IE6

OK we all know how much of a pain IE6 can be. To date, 1/3 of my visitors use IE7, 1/3 - IE6, and the rest is a nice mix of everything else. I’m not certain, but fairly sure IE7 renders ’good’, FireFox rendering is the look I want.

IE6 has funky padding of some sort. If someone can look at my home page in general and figure out where things are going wrong in IE6 I would really appreciate it. I know it is a CSS related problem. The IE6 issues are most visible on the index page.

http://sweetskies.fruitwerks.us

Thanks!

I use the amazing Dean Edwards javascript CSS compatibility layer for IE5.5+ and I forgot all CSS problems of old IE’s.

hmm.. I don’t get it.. I downloaded cssQuery2.zip I unzipped it and loaded the test page.. I’m totally lost

the easiest solution i know is to write a seperate stylesheet for ie6 and target in the <head> of the ducument with a comment like the following:
<!--[if IE 6]><link rel="stylesheet" href="css/screen_ie6.css" type="text/css" /><![endif]-->
Here my ie stylesheet is called ’screen_ie6’ and is in the ’css’ directory.
just make sure that you put this call after the call to the main stylesheet.

In the ie6 only stylesheet you include only the ie6 bug fixes, like different padding values etc. It works for ie7 too - you just make a similar call in the head but just put [if IE 7]

i’ve been using this method for a while now and it works fine. Only ie sees these comments - all other browsers ignore them.
hope this helps

@fruitwerks

rootsdiv is right in using IE conditional comments. It is the most effective and least difficult way to handle those issues that only creep into IE6 rendering of elements--especially those relating to boxes and padding.

Learning some of the most common IE6 issues, like the Guillotine Bug, 3Pixel Jog and others that have to do with floats. You should make http://www.positioniseverything.net/ your friend when doing crossbrowser testing.

Best of luck.

Jay