troubleshooting/debugging css.

CSS Hints HOWTOs Web Development

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 😉
  7. 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]

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Oregon Trail Goodness

Oregon Trail is one of my favorite games of all times. As I was watching RocketBoom on Monday (brought to me by my TiVo), I had to laugh when I saw Amanda’s shirt “You have died of dysentery” because I absolutely loved it. As a die hard fan, who still plugs in my Apple IIgs […]

say hello to ken pesanka.

Last night I was working with my good friend Ken and he asked me about possibly being a guest writer on my blog for an occasional Ken post. I thought it over and decided to give him an account. Stay tuned for a Ken post in the near future and it will be written by […]