CSS in Mozilla Firefox & MAC OS Browsers

I have recently come across a seemingly bothersome problem when it comes to viewing a site, designed with CSS, in Mozilla Firefox and any browser in MAC OC (IE, NS, etc).

As I normally do, I create a site with a set of styles in an external style sheet. I use a standard for naming schemes so I know what styles I can use, ie; .TrebuchetBold10ptNorm, .TrebuchetBold10ptBold, etc.

Just recently a client / friend of mine told me that some of his customers were having problems with the website, that the text could not be seen (over a black bg), and that the top and bottom navigation menu were looking unusually large?

Long story short, after doing some research and many google searches, I found the simple answer to my seemingly complex problem. I had strayed from my usual naming scheme by something so simple:

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) : To make ".12ptWhiteTrebuchet" a valid class, CSS2 requires the first digit to be escaped (".\312ptWhiteTrebuchet")

So in other words, I renamed my styles from .10ptTrebuchetBoldNorm to .TrebuchetBold10ptNorm.

That's it!

Nonetheless, always check and validate your code using the tools at the W3C: www.w3c.org.