4.01 != 5

Ran into an interesting problem at work this week. And when I say "interesting", I mean "crazy annoying". See, I developed this small Catalyst web application on my Linux laptop. Added cool gradients, box shadows, and round corners using CSS. Everything looked GREAT!

I moved the application onto our test web server. The app should work exactly the same, right? Yeah, I didn't buy it either. Type the URL into Chrome and pow - there's no background on the links. These links perform actions. So I styled them like buttons. All of the styling disappeared.

Long story short, the style sheet set the --webkit-appearance property for those links. I thought that it made the links all the same width. Turns out it does more, and that more messed up their appearance under Windows. Remove --webkit-appearance and the links looks like buttons again.

Now how do I make them the same width? The correct property is display: block. Poof - we're back and running!

Pull up the same page under Firefox. Everything looks great. Links still look like buttons. I'm making good progress here.

Internet Explorer 8 comes last. Ugh! This page is all wonky. Worse - the standard elements I copied from the main web site look all wrong. That's impossible. That exact same HTML appears just fine on our main page. Why not for my page?

I'll spare you all of the dead ends inherent in debugging. In the end, the problem came down to the <!DOCTYPE> declaration in the HTML. Dumb me, I copied it from an older project. So this current document declared the 4.01 DTD. And the HTML content blithely contained HTML5 tags. Oddly, Chrome and Firefox both ignored this contradiction. IE ignored the HTML 5 tags - making the page look downright nasty.

Knowledge in the World
This little experience reminded me about The Design of Everyday Things by Donald Norman. The book talks about the distinction between knowledge in the head and knowledge in the world. See, my problem and its solution with <!DOCTYPE> completely dealt with knowledge in the head. That in and of itself is another problem.

Nothing in Chrome, Firefox, or IE told me the problem. Yet all three clearly saw the contradiction.

Error messages are very difficult to do right. Users really don't care about the technical details. Shoot, I'm a programmer and I don't care about the technical details. I want to know how to fix the problem! Error messages should put knowledge in the world. When I went looking for the error, a message about  tags not matching the DTD would have gone a long way. It would have taken knowledge the browser had and placed it in the world - so I could see it.

That brings up another good point - know you audience. Error messages for developers leave hints. Point a good developer in the right direction and they'll find the solution. Users, however, may require more hand holding. I would never expect a browser to show users messages about DTD's and HTML versions. Communication means understanding.