No, this isn’t an “Internet Explorer is crap” article.

This was very frustrating. I was rewriting the CSS for the web site I’ll be opening up later today, doing a first test of the changes in Firefox, and none of the changes were showing up on the page.

Using Firebug and XRAY, the changes weren’t even appearing in the CSS as they reported it.

I started out tweaking the CSS and became more and more confused as the changes I was doing failed to make any impact on the appearance of the page. Once I found that they weren’t being recognized I thought that Firefox must be caching the CSS file and not reloading it… I found an extension to give me a handy “clear cache” button… that didn’t do it… I went into the preferences and cleared the cache by hand… no good.

I tried the page under Safari and it rendered the way I expected it to. I tweaked the CSS and saw the effects of the tweak. That was good news… but why wasn’t Firefox working? I’d never run into this kind of problem with it before.

The answer, it turns out, was that I was using a bad ID name in my CSS and HTML. Specifically, ID names cannot start with a number. They have to start with a letter. I had named an ID “3ColWrapper”. Safari was willing to roll with it but Firefox (reasonably) was not. Further, Firefox didn’t report any errors about this on its console.

I finally found it when out of frustration I tried validating my HTML and the validator reported that I had an invalid name for an element’s ID. Just changing it to “Col3Wrapper” solved the problem and everything was working as expected.

Firefox is a great browser for web development. This is the first time it’s bitten me, and to be fair it was only due to my own error. The real moral of this story is to use tools like validation as a first line of defense in dealing with errors.

The web developer toolbar for Firefox is a wonderful tool for anyone working on web pages, and it offers easy access to online HTML and CSS validation tools.

[tags]css, firefox, selector, id, html, xray, firebug, validation[/tags]

|  Print This Post