One thing that separates real web people from halfasses (and no-asses) is the sheer quality of the code, and its adherence to <a href=””http://w3c.org”>standards. For a variety of reasons, “well, it works” isn’t a very good barometer of whether or not a particular page’s code is correct; some browsers helpfully adjust errors in HTML to produce what they think you meant, for example, which is great for that particular browser, but not so good for the developer, as it gives him or her a false sense of accuracy. Most modern browsers are more meticulous, so this happens less often now, but it’s still an issue.

The only way to make sure you’re doing right, then, is to (a) test in as many browsers you can find and (b) use a validator to ensure syntactic and semantic accuracy in your code. Many, many problems go away if your code validates; in fact, today’s lesson is how important it is to validate even if you think you’re already valid.

Be advised that while we all, I’m sure, are very, very careful about validating our HTML, it is equally important to validate our CSS as well. I spent an hour or so today trying to figure out why my formerly functional, carefully validated layout worked fine in Mozilla, Firefox, and IE, but failed utterly in Safari — frankly, a situation I’ve never seen before.

Only after remembering to validate my CSS did I discover the problem:

This rule had a typo in it:

      div#left h2 {
        color: black;
        padding-bottom: 0;
        margin-bottom: 5px;
        text-align: left;>
        }

The trailing > in the final attribute crept in without my knowledge, doubtless on an inadvertent keystroke. IE and Gecko browsers appear to have been ignoring it as garbage; at the very least, it caused no trouble for me there. In Safari, however, the entire layout was hopelessly broken with all three columns rendering on top of each other, etc — a pretty awful sight, and very discouraging.

Up to now, I’ve not had this particular experience — ie, everyone but Safari working fine. When I code to a compliant browser, I usually find that only minor changes are required to get an optimum presentation in all modern browsers, so this little problem took me completely by surprise.

Once again: validate, validate, validate. Then validate again. The time you save may be your own.