CSS somethings not loading?

[beethai]

I am currently creating a website using PHP which dynamically creates HTML and includes a css file (styles.css) into each of my php script files.

Sometimes I hit refresh or load to another page and it appears like the CSS code never loaded...so my site ends up looking like a big mess (b/c I use css to format a lot of things).

This seems to happen randomly, but I would say it happens on my site 1 out of 99 times. This is not good.

Does anyone know what may cause this?

I use IE5.5, NS7.

[neil100]

Sometimes external stylesheets fail to load, this happens when the server is very busy and can't handle all the requests coming in at once (it occurs sometimes on sitepoint when it gets busy), I don't know what you can do about it other than not use external stylesheets, but then you lose half the benefit of css.

[beethai]

oh no! so your telling me with all the different ways you can do things out there and ideas, there is no way to prevent this? What about how I'm including it or what if I keep the CSS file to a small size...is there anything that could help reduce this problem? (besides not using external style sheets)

[AndyXL]

Im pretty sure there is a function in php, which could check if the css file was loaded properly. Try www.php.net, and search in the functions list. Then you could use:

if (!function()) {
echo ("<meta http-equiv='refresh' content=10; url=<?=$PHP_SELF ?>' />");
exit();
};

[Hierophant]

Originally posted by AndyXL
Im pretty sure there is a function in php, which could check if the css file was loaded properly. Try www.php.net, and search in the functions list. Then you could use:

if (!function()) {
echo ("<meta http-equiv='refresh' content=10; url=<?=$PHP_SELF ?>' />");
exit();
};

Since this is really a client issue, how can PHP know if it loaded properly or not?

What happens when this occurs is each browser will wait XX amount of time for an element to load. If it doesn't start loading it will move to the next item in the list. If the server is heavily trafficked, items might be missed. The same issue happens to files and external javascript. The only way to prevent it is to lower the number of required external elements on your site, try to eliminate nested elements (i.e. imported CSS and nested Javascript files). Making sure your external elements are optimized also helps since each item takes less time to send. Readable code is nice but slows things down.

For CSS specifically, I use TopStyle. It allows me to run "CodeSweeper" which automatically formats my CSS. The cool thing about it is that it allows multiple definitions. So I have one for development which puts each attribute on one line, doesn't reorder elements (classes, tags and ids), and makes the code very readable. When I am don't I run a "publish" profile on it which puts each element and its attributes on one line, sorts elements by type and alphabetically, and collapses attributes where possible. The resulting files are 20-30% smaller. When I need to edit it, I simply run the "Development" profile on it again and it is nice and easy to read again.

[Mathias]

What you could in the event that the stylesheet does not load is the following:

-stylesheet entry-

span#oops { display: none; }

-html entry-

<span id="oops">The stylesheet was not properly loaded for
this page. This could be due to a high traffic load, or a 
browser not supporting current CSS standards. Click <a 
href="#">here</a> to reload the page, or simply hit CTRL-F5 
to refresh.</span>

What that does is NOT show that text if the stylesheet was properly loaded and rendered. If the stylesheet wasn't, then that text is clearly displayed wherever you may place it. Another option to look as is whether or not the correct filetype is being passed to all browsers. I have seen some servers that are not setup correctly; a quick easy fix to this is simply to open up .htaccess and input "Addtype text/css css" on an open line.