Internet Explorer Speaks American

This is the first in a series of short articles called "Mistakes I've Made". In this series I plan to give examples of mistakes, misunderstandings, and problems I've encountered while coding. Maybe they will keep you from going through the same frustration.

I came across this "mistake" while making the new CSS for this site. Apparently, Internet Explorer only speaks American English. Here is the code I created:

div.warning_note {
  border: 1px solid grey;
}

Can you see the problem? No? Neither did I while I was looking at the site in Firefox. It only became apparent when I tested it in IE. Apparently Microsoft will only recognize the American spelling of "gray", not the English spelling, "grey". I guess I have read too much Tolkein. Here is the more acceptable code:

div.warning_note {
  border: 1px solid gray;
}

Normally, I insist on never using human-readable names for colours (or is it colors?) and now I remember why. Here is what I ended up using:

div.warning_note {
  border: 1px solid #CCCCCC;
}

I hope this helps someone who might have the same problem. And what do you know? Just trying to post this story lead directly to my next article: <pre /> Doesn't Do Style. Enjoy.