Troubleshooting your CSS

sometimes it's difficult to spot if a CSS rule is in conflict with another area of code. But here's a very basic guide to begin troubleshooting your CSS:

* Validate the HTML {checking for incorrectly nested elements}
* Validate the CSS {check for punctuation/parse errors}
* Take a copy of your page before you start
* Remove all the HTML between the body> /body> tags
* strip out all your CSS rules.
* add back in main layout Divs and their CSS rules {size, positioning, padding and margin rules etc., {not the "pretty" fluff, font styling etc..}, one by one
* add back any headers and footers one by one
* add temporary background colors to these layout divs to see if they are where you expect them to be
* add padding and margin rules back in one by one
* add in some content.. some plain and

to start with, then add their margin/padding/border rules
* add some specific content ul>s images> forms>, then their margin/padding/border rules
* finally add some font-sizes and line-heights
* Navigation menus/Effects should be built in a seperate page to make sure they're working as you'd expect before adding them into your layout page

If at any point during the above process you trigger your problem you will either have found your own "error" or you will have a basic layout for posting. Before posting remember to remove all urls, a href="#"> will do, we don't need full paths to images, font-families, or even all instances of a dropdown list/special effect (one will do). Image urls are not required but sizes can sometimes be helpful.