Debugging CSS

I rescued myself from spending god-only-knows how long trying to find a very small alignment problem on a new site that was causing me major frustration.

Ok, I didn't do all the rescuing, I found a website with a couple helpful hints for debugging CSS. Since there is no software, online or off, that will find all the bugs for you, you have to commit yourself to becoming a problem-solver.

I used to use the border property on divs that were out of alignment, but now I'm using the background-color property to highlight the element I'm working on. The other suggestions were:

• set margins to 0
• adjust values from tiny to huge and see if you've got the right element and what happens
• hide selective elements - you never know what might be causing the problem until it's gone (just comment out your code, as you'll probably need it later)
• get rid of unneeded elements - take it down to the bare minimum and start over, adding a single element at a time
• validate your (X)HTML - make sure it's square before proceeding with style

MY problem was none of the above, but using BG color did help me narrow it down to the right element. I was using an H1 tag without setting a font-size, and the height was too much for the background image until I reduced it to fit! You just never know...