What might cause CSS to fail to load occasionally on all browsers?

Question

I'm working on a webapp, and every so often we run into situations where pages will load without applying CSS. This problem has shown up in IE6, IE7, Safari 3, and FF3.

A page refresh will always fix the problem.

There are 3 CSS files loaded, all within the same style block using @import:

<STYLE type="text/css">
  @import url([base css file]);
  @import url([skin css file]);
  @import url([generated css path]);
</STYLE>

In any situation when we take the time to examine the html source, nothing is out of the ordinary. Access logs seem normal as well - we're getting HTTP 304 responses for the static CSS files whenever they are requested, and an HTTP 200 response for our generated CSS.

The mimetype is text/css for the css files and the generated css. We're using an iPlanet server, which forwards requests to a Tomcat server.

davebug asked:

Is it always the same css file not loading, or is the problem with all of them, evenly?

None of the CSS files load. Any styles defined within the HTML work fine, but nothing in any of the CSS files works when this happens.

Answer 1

I've had a similar thing happen that I was able to fix by including a base style sheet first using the "link rel" method rather than "@import". i.e. move your [base css file] inclusion to:

<link rel="stylesheet" href="[base css file]" type="text/css" media="screen" />

and put it before the others.