CSS link/file is often not working

css file, css link

[uluru75]

Hi,
I have included my css stuff within css file.
However, it often happens that when i refresh (F5), reload, start from home page, the css file doesn't trigger.
I have to do it several times until it starts finally. I have noticed that so far in FireFox.

I would say that out 10 times, at least once it happens that css file is not triggered at first.
Does anyone knows what could be the problem? How could i enforce?
thanks.

[rainborick]

One possibility is that the hosting service you're using is caching CSS files. I know of a particular hosting company that relies on a customized load-balancing system on their servers that is doing this. On this system, it can take over an hour for a newly-uploaded CSS file to be distributed across their servers, which makes it difficult to tweak a design online. This would explain what you're seeing.

I don't think there's a workaround for this except to embed the CSS settings you're changing within the HTML file. Then, once you've got the results you want, you transfer the CSS from the HTML file back to your CSS file.

[Furiat]

If the problem is: "I modify my CSS but it doesn't seem to load the modified version - it loads the old css" then the solution would be this:
<link href="style.css?enter_version_number_here" rel="stylesheet" type="text/css">
And simply change the version number each time you modify your css file.

However if the problem is: "Sometimes I enter a page and it doesn't render with any stylesheet at all. It's just line after line of text and nothing else." then I would like to know the answer too. I've experienced it on many sites with different browsers, but it never was as persistent as 1 out of 10 (more like 1 out of ~10000).

[uluru75]

The problem is that I don't change anything within the stylesheet but the CSS is often not applied.
However, the possible cause of that might be slow internet connection, i hope because i dont see anything else.
Thanks for help.

[alt131]

Hi uluru75 and welcome to WebmasterWorld ;)

I have also noticed the same issue in ff3 - both on an older site I've authored, and general surfing as well. I never bothered to track down the cause, and it seemed to stop in newer ff versions so I can't even remember what ff version started doing this.

However, if this was happening to a newly authored site my approach would be different. Have you considered "flash of unstyled content"? I am not sure this is the issue (personally I thought it was related to ff, not the site) and less likely given you have a slower internet connection (which does not usually produce this result) and have linked (rather than imported) your style sheet. But useful to check anyway. Plus you did not mention javascript, and that can sometimes cause a stall.

A g* will bring up an overload of information. The older articles at 456 Berea St are still relevant given this is an "old" issue, including the link to the blue robot article. However, a search might turn up something specific to recent ff versions (given there's at least two of us who have noticed it recently ;) )

Do post back if this doesn't help, or if you find the solution - your post makes it look as if this is worth exploring in more detail.

[uluru75]

Now started seeing this also in Opera and IE.
So browser may not be an issue.
"flash of unstyled content", if i understand correctly is just a flash, but in my page it stays unstyled. Also, "flash of unstyled content" is fixable by using <link instead of @import, so that's not the case, i guess.

You mentioned javascript. I have several js files included. I'm trying to see if that's the problem.

Question, is there any way to find out whether the page is dispalyed unstyled?

Thanks.

[alt131]

Question, is there any way to find out whether the page is dispalyed unstyled?

Can you clarify what you mean by this question - it should be obvious whether the css styles have been applied just by looking at the page.

Now started seeing this also in Opera and IE

So that indicates fundamental problem somewhere. I agree FOUC doesn't seem likely in this situation, but always useful to check as part of problem solving. I would definitely investigate the javascripts.

Other things that may help with trying to locate the source of the problem are:
Asking whether this is happening to you - or other users as well? If confined to you, then double, triple-check basics like clearing cache and ensuring browsers are set to request newer versions of page on each visit.

Try to trace events as the page loads - two tools that may assist are Developer tools (Opera) and the console (Firefox). You might also consider installing the Firebug, YSlow and Pagespeed add-ons for firefox. They are really useful for general coding, but will also provide information that helps explain how css and javascript scripts are being handled as the page loads.

[uluru75]

Question, is there any way to find out whether the page is dispalyed unstyled?

What i meant here is that i wanted to log if it happens to other users. But how some scripts (ex. javascripts) can detect that?

Thanks, for the advices.
I focus so far on the js files. What i did so far is reducing the sizes of the files (removal of comments, spaces, etc) and it seems to work so far.

[alt131]

i wanted to log if it happens to other users. But how some scripts (ex. javascripts) can detect that?

I suspect it would be possible, but don't know of any myself. I suggest search/ask in one of the server-side forums (As Javascript is browser-side it will only be helpful if it loads, and failing to load is the issue here.)

However, other ways to extract the information:
1. Check your server logs, especially error logs.
2. Check your web statistics/traffic. Some of them display file related errors, including whether files have completely or partially loaded.
3. Check the site using something like browsershots.org which is free, and p0rovides a (small) sample of make-believe "users".

What i did so far is reducing the sizes of the files (removal of comments, spaces, etc) and it seems to work so far

In theory unless your files are mb's, size should not cause this, but despite the "theory", my personal general surfing experience is that sites with large file sizes do have problems loading. Reducing file-size is good coding practise, and also ask if javascript is necessary. These things may not apply in your case, but for example, use css rather than javascript for link hover effects and use server-side (like php) rather than javascript for other things.

Also, the most obvious thing: Use the w3 validator [validator.w3.org] to make sure the HTML and css code is valid.

[uluru75]

Finally found the reasons.
Permission of the folder where the css file was located didn't have public 'execute' set.
Now, works perfect.
Just don't know why sometimes the css was applied sometimes not.
IF it didn't have public 'execute' then it should have never applied the css, am i correct?