Debugging CSS and Browser Issues

Perhaps, the best tool I can recommend to debug CSS is firefox's Firebug and Web Developer Add-Onns. But sometimes they're just not enough, so I will give you a quick step by step manual of how to debuggin your css code and browser issues.

First, validate your HTML code. Go to http://validator.w3.org/ and simply correct every errors you may find. just copy paste the error to google and with some efforts you'll get the solution how to fix them.

Second, validate your CSS. Go to http://jigsaw.w3.org/css-validator/ and do the same thing as you do with your HTML code.

Third, simplify your CSS. Add new rule at the end of your stylesheet, using global selector and set properties for all elements, like this:

*{
margin: 0;
padding: 0;
}

Then, give border to every block-element so it become like this:

*{
margin: 0;
padding: 0;
border: solid 1px #000000
}

Comment out any css rule you suspect causing the errors, do it one-by-one until the problem recurs, and finally:

Find and research any similar problem through google. You may found some css bugs are well mentioned at expert-exchange. and http://www.positioniseverything.net/.

Hope that helps.