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.

Answer 2

if it happens often enough that you're able to see it in your browser, try intalling the Live http headers Firefox extension or the Tamper Data extension, and watch the response headers as they are seen by the browser.

Answer 3

I don't know why, but in my case if the page is loaded from an action with the path like /ActionName, I see this problem.

But if I change it (for example) to /reservedArea/ActionName or /aPath/ActionName it works :/

It's crazy...

Answer 4

Examining the headers is a good idea, but I imagine all you will learn from them is that the server didn't respond to a request every once in a while.

I see this happen all the time on the net. Images won't load until you refresh, css is messed up, etc. All of the situations are solved by a refresh.

I imagine one way you could "fix" this, maybe, is by specifying in your cs file a url for an image for some element. Then, on page load in javascript, get that element and see if that image has loaded. If not, then have the page reload itself.

Seems pretty exotic, but that's the only idea I had...

Answer 5

Use ab or httperf or curl or something to repeatedly load the CSS files from the webserver. Perhaps it's not consistently serving the pages.