Debugging CSS - CSS validation

Once HTML is valid, we must validate the CSS as it is useless to start debugging a page when the HTML is valid but the style rules are not.

The page that we use as an example was posted by its author in a help forum. It has been reduced to a test case, borders have been added and three versions can be displayed here:

•  Page with HTML and CSS errors 
•  Page with no HTML and CSS errors 
•  Debugged page 

Using the extension Error Console or FireBug to verify CSS locally

Error Console and FireBug spot 2 errors in the styles:

Not much: a missing semicolon in the end of line 12 (color:#6600CC instead of color:#6600CC;) and a typo line 49 (text-align:centre; instead of text-align:center;) but the difference is important as you can see in the screenshots below:

• Mozilla
• 
• MSIE 6
• 
• Opera 9
• 

Unfortunately some display issues are still there but now we can start debugging.

We could have used the online service of the W3C, it gives information which is sometimes more precise and it displays accessibility warnings.