4. Common Symptoms
Most CSS bugs have already been discovered by other people already, and because web developers are essentially the core of the internet, these problems and their fixes are very well documented.
There are far too many common problems to list here, but here are a few for example's sake:
- A gap of 3px between floated divs
- Content dissapearing and re-appearing when you hover a link
- Elements being much wider, or not as wide as you expect
If you can describe what you're seeing, there's a good chance google will be able to point you in the right direction. If not, sites like positioniseverything.net are fantastic resources for how to fix common, and not so common problems. People have put a lot of time into figuring this stuff out so that you don't have to. Take advantage of collective knowledge, and how easy it is to access.
5. Parents and Children
No, don't go asking your parents if they can see the problem. I'm talking about attributes inheriting from their parent elements. If you don't know which CSS rules are inheriting from what, this can make finding the cause of your problems a lot more difficult.
Recently I've come across a brilliant extension for firefox called Firebug. It has become an invaluable part of my CSS debugging, and in my opinion its pretty much THE killer app that every web developer should have in my opinion. Luckily for you its free.
Firebug makes this step insanely easy.
- Open firefox, enable firebug.
- Right click the problem element on the page, and select "Inspect Element", or select the element from firebug's HTML pane.
- In the right hand pane, make sure the "style" tab is selected, and you should see a list of all the classes that effect that paticular element. Things like text-align will inherit from their parents.
- Another huge advantage of this, is that you can click the space to the left of any attribute, and turn it off or on (a little red icon shows up) and see what changes instantly in the browser.
I'd actually started writing this tutorial, and then was introduced to firebug, and have re-written the tutorial incorporating firebug into the process.