I was improving the CSS of an old intranet web app (written in early 2001) to be closer to standards-compliance (getting it to just look good in Firefox and Safari would be good enough for me). While I was working on that, I noticed a whole bunch of my CSS that was being completely ignored. As it turns out, all of the code in a separate CSS file that was being imported with @import was not being rendered.

FireBug showed me that the CSS wasn’t being applied to the elements that it should have been applied to. Hmm. Then I used the “Net” tab of FireBug to see that Firefox wasn’t even attempting to load the external CSS file.

The solution is simple. My @import directive was surrounded by other CSS instructions. Whereas IE tolerates this, the actual W3C spec declares that @import directives should appear before any other CSS instructions, and Firefox honors this restriction.

Thus, my @import directive was being ignored. I moved it to the top of the file and everything started working.

The lessons? Don’t abuse @import directives. Ideally, they should be used only to have a single CSS file that imports several smaller functional CSS files as a means to provide some organization to the CSS. I was using @import mixed in with my other CSS instructions, which is not ideal.