How to debug CSS
This is not a tutorial. This will not tell you how to fix the problems you encounter. This is a list of guidelines that will help you identify what the problem is, so that you can take the steps you need to fix it. This guide has to be relitively vague, as its not about one specific problem, its about every problem you’re ever likely to encounter.
Fixing these problems quickly, so that you don’t waste your time, and your client’s money, will come with gaining experience and knowledge, and hopefully this guide will get you started in the right direction.
1. Identify the Symptoms
First, identify that you have a problem. A simple step you would think. A lot of problems I encounter on a day to day basis are very small visual discrepancies, and only by testing your layouts well, and having a good eye for detail, will you notice a lot of these.
2. Human Error
Yes, the first thing to check is that its not your fault. This is the first thing you should do because it stops you looking like an idiot further down the track when you ask other people for help, and the other reason, is that more often than not, it will be your fault. At least when you’re starting. So check (and double check) the following pitfalls:
- Check your spelling. Check that you’re class and id names are spelled correctly, both in the CSS and HTML.
- Check your paths. Check the path to your CSS file, or any image paths if there’s an image display problem.
- Check your casing. Some browsers and OS’s are case sensitive, and an id of #MyAwesomeID, will be interpreted differently to #myawesomeid.
Although it wont stop you looking silly, getting someone else to have a look at your code quickly can be a much faster way of detecting errors like this. Other people tend to find your spelling mistakes quicker than you can yourself. I don’t know why, but it tends to be the case.
Because my tutorials are aimed at designers, I’m going to assume you already have a keen eye for detail, and hopefully, you designed the site, and have strong expectations of how things *should* look.
So you’ve noticed something is wrong. Lets figure out whats causing it.
3. Validate it
The major benefit of writing valid (X)HTML and CSS is the ability to validate your code. If you know your code should be valid, a quick run through an online validator can pick up things like missing attribute quotes, unclosed tags, incorrect nesting of tags, and all kinds of things that can cause you problems.
If you’re using Opera, ALT+CTRL+SHIFT+U will validate the current page for you.
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.
6. Measure it
Take a screenshot of your browser, paste it into photoshop, and use the marquee tool to measure your element. If its smaller than its supposed to be, find out how much smaller it is.
If your columns are too far apart, find out HOW far apart they are. If the space is 3px, your looking at a 3px float bug. Otherwise, if the gap is say, 15px, search your CSS for anything that might cause a 15px change in any element. A 15px margin on another element, a 10px left margin and a 5px right margin, just look for any similarities, as they are most likely connected to your problem.
This one is kind of tacked on at the end, but it caught me the other day, so I thought I’d include it.
Make sure you check that you are using a valid and correct doctype for your site.
The wrong doctype, or no doctype at all, will make coding for all browsers next to impossible. If in doubt, use XHTML 1.1 transitional I say. There are many opinions on what doctype you should or shouldn’t use, which I’ll let you make up your own mind about. Just make sure you use a doctype, regardless of which one you pick.
8. Isolate the problem
If all else fails, back up your HTML and CSS, and just start ripping styles and html elements out until the problem isn’t there any more. Then put things back in one at a time until it breaks again. Generally you’ve found your problem element.
9. The Community
If you’re still struggling, then go to google groups, or some other web dev related message boards, and post your problems in hopes that someone will be able to help you.
Every few months, it might pay to revisit this article just to refresh your memory and make sure you are following these steps, as some things can be easy to forget. I hope you’ve found this guide helpful.