back to Tutorials

How to debug CSS

« Previous 1 2 3 Next »

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.

7. Doctypes

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.

« Previous 1 2 3 Next »