troubleshooting/debugging css.

After spending fourteen hours this weekend working on CSS for a project (99% positioning), I thought I should write something about troubleshooting and debugging common problems I usually run into in hopes it can save others a few minutes/hours/frustration.
What to do when the unexpected happens (including when nothing at all):

1. class(.) or ID(#)? There are sometimes when I define a class (#) and then try to call it in a page by using
   instead of calling it in correctly using

   .
2. spelling. I cannot tell you how many times I define a class that I thought would be perfect then when testing it, nothing happens. Most common problem: I have either misspelled the defined class name, or in the code misspelled “class”. There have been many occasions when I catch a “calss” in my code instead of “class” which then brings unexpected outcomes.
3. matching curly bracket ( } ). If you define a class, ID, or element, make sure you have both an opening bracket and a closing bracket. If you are missing either, your CSS will not show up properly. You will also get unexpected results if you have two closing curly ( } ) brackets in a row.
4. semi-colons. If you define a style, make sure you have a semi-colon after it. If you leave out the semi-colon after a value (selector {property: value;} ) you will not see any change. (I have done this countless times)
5. validate. If all else fails, look for any weird characters in the style sheet – common issue when using subversion and there is a conflict) or validate your CSS. (You should always try and validate your code, but validating your code when you are having issues is a good way to see warnings/errors really quickly).
6. One last thing…make small changes and look at the changes in at least 3 different browsers – preferably on two different platforms. Better to catch the problem early, then after you have nested divs and no idea what happened 😉

Hopefully knowing what to look for will save you time next time you are ready to scream at your CSS problems. I still run into the problems above on occasion, but at least I know what to look for now…and that saves countless hours!
P.S. You know you have been doing too much CSS when you are trying to sleep at night in your bed…and there is a cat down by your feet…and in your mind you are creating a div container to contain the cat in one spot. Yikes.
[tags]CSS [/tags]