Information Technology Systems & Services
Validating CSS and Markup to Help Debug CSS
Valid markup and CSS just aren't just good for accessibility and web standards. Valid CSS and XHTML are good to help debug CSS. Nothing will work if you have improperly nested and unclosed elements! Always make sure your markup is valid before writing your first style rule. Then validate as you work to help yourself reveal CSS problems. Many cases of "it works in one browser but not another" are caused by silly author errors. Typos like missing attribute values can cause browsers to crash; validation catches these typos. Simple errors like missing end tags or missing elements can cause different problems in different browsers. Small mistakes like this may be difficult for you to spot in your own code, but the validator pinpoints them immediately. Beware of cut and paste. Always double-check anything you are cutting and pasting into your pages. This is where I've noticed many validation errors originate.
It is common on a newsgroup or listserv to see posts complaining of a bug in one browser, when the cause is in fact incorrect stylesheet syntax that another browser is lenient towards. Beware that Explorer can be very lenient toward invalid style sheets. If you usually "test" your web pages with Explorer, you might get some surprises when you view the page in another browser, which supports CSS. An example of this is leaving units off values. The following rule is invalid CSS. Browsers should ignore it.
h1 {margin-left: 10;}
This specifies that the left margin for <h1> elements should be 10. 10 what? It isn't specified, and so, this is invalid, and should be simply ignored. Netscape Navigator does so, but Internet Explorer happily treats this as 10 pixels. Often designers consider that Netscape/Mozilla is buggy (because the style sheet 'doesn't work') when in fact it is behaving correctly in ignoring the rule. IE is the browser that does not 'work' in this case...it is buggy.
If a person uses syntax in their CSS or XHTML, which is not correct, there is a far, far greater chance that style sheets won't work as expected. Any number of strange behaviors can be triggered in various browsers if there are syntax errors in your XHTML or CSS. Browsers, which support style sheets, are very choosey about markup and CSS.
But the validator is an automated tool that can highlight small but important errors that are difficult to track down by hand. If you create valid markup most of the time, you can take advantage of this automation to catch your occasional mistakes. But if your markup is nowhere near valid, you'll be flying blind when something goes wrong. The validator will spit out dozens or even hundreds of errors on your page, and finding the one that is actually causing your problem will be like finding a needle in a haystack.
Validation isn't a magic bullet that will automatically solve all your CSS problems. Designers still cope with lots of cross-browser and cross-platform compatibility problems with valid CSS and markup. But validating your pages as you work eliminates many potential incompatibilities, leaving a more manageable subset of actual incompatibilities to work with.
References: