CSS will not load on school network

Forum Moderators: not2easy

Message Too Old, No Replies

CSS will not load on school network

Network Filters

SecWeb

3:55 pm on Oct 11, 2011 (gmt 0)

So I have a slight problem, and I am pretty new to the website scene so maybe the answer might be easy. I have my website hosted on a separate host than the school's but I guess the school's network filter does not allow the .css to pass. When I go on the site at school all I see is an unstyled website. At home the website works great. Any ideas?

Hoople

4:53 pm on Oct 11, 2011 (gmt 0)

A quick fix would be to add the css to the head of the webpage.

Does the school's website also suffer from this?

penders

5:13 pm on Oct 11, 2011 (gmt 0)

...I guess the school's network filter does not allow the .css to pass.

That would be an extreme filter - I doubt they are filtering CSS files!?

At home the website works great.

You are viewing the site across the internet I assume, not locally? Can others see the site OK?

One reason for CSS files not to work at all is if the server is sending the wrong Content-Type response header for the CSS file (it should be "text/css"). Although I doubt this is the case if you are on a shared server.

topr8

6:24 pm on Oct 11, 2011 (gmt 0)

are you hosting the website at home? if so is the filepath correct.

check to see if you can call up the css file directly at school eg:

example.com/excss.css you should be able to see it.

topr8

6:25 pm on Oct 11, 2011 (gmt 0)

are you using a different browser at school - maybe there is an error in the css file which is choking the different browser.

SecWeb

12:57 am on Oct 12, 2011 (gmt 0)

Do you guys want me to post the <head> ? The css is being called in the head of the code. And what is weird is that the first time it will load it up fine but once you refresh the website will go to that text version.

SecWeb

12:58 am on Oct 12, 2011 (gmt 0)

And the school's website doesn't seem to suffer from it at all. And if it helps I'm using wordpress and a theme but I didn't find any problems with the code, even though I'm a noob I tried my best to decode all the stuff I was looking at.

lucy24

1:21 am on Oct 12, 2011 (gmt 0)

And what is weird is that the first time it will load it up fine but once you refresh the website will go to that text version.

This is completely fascinating, because once in a blue moon SubEthaEdit's html preview will do the same thing. That is, when I save a change to the page it auto-refreshes-- but the new version no longer has the (external) CSS. Or images, if any. Do images also disappear from your site?

What browser does your school use? Does the CSS use a relative link?

:: looking suspiciously at Apple WebKit ::

SecWeb

1:41 am on Oct 12, 2011 (gmt 0)

I'm such a total noob and JUST started with web designing so I'll try the best to answer your questions. The only images that do not appear are the ones stored on the host's server. And it just happens at school we use Macs and PC and it will work SOMETIMES on both. Chrome, Safari, Firefox, Internet Explorer etc.

lucy24

3:04 am on Oct 12, 2011 (gmt 0)

The only images that do not appear are the ones stored on the host's server.

Whoops! Do you mean your host or the school's host? That is: is it your own images or the hotlinked ones that sometimes don't show up?

:: vaguely scenting the glimmer of an explanation lurking just over the horizon ::

SecWeb

3:06 am on Oct 12, 2011 (gmt 0)

My host :D and it's both? Just the ones I link from flickr that show up

alt131

4:48 am on Oct 12, 2011 (gmt 0)

Hi secweb, and welcome to WebmasterWorld :),

Do you guys want me to post the <head> ? The css is being called in the head of the code. And what is weird is that the first time it will load it up fine but once you refresh the website will go to that text version.

No need to post your head at this stage - but can you just confirm the css is applied on the first load, but not on refresh. Plus, is this for every page (loads, then on refresh doesn't apply css), or for the whole site (loads for one page, then on every other page the css is not applied)?

Have you validated your css [jigsaw.w3.org]? I'd also validate your HTML just to be sure as well. There are many reasons the css may not be being applied consistently, but invalidities are one cause of erratic behaviour.

Also have you checked the schools filter/blocking rules, especially for the images?

SecWeb

5:41 am on Oct 12, 2011 (gmt 0)

Thank you for the welcome :)

Yes the css is applied on the first load, and it is the whole site not just a single page. I went to check on the validation link you posted. I put in the main css file and 73 errors came up, but maybe it is because of it being for WordPress? This might sound like the dumbest thing ever but where would I find the html file for my site since it is WordPress?

The school does block images, but I doubt that is it because I can access pictures on the school network if I work around it. They also block java of course but that doesn't really pertain to my website anyway.

alt131

12:58 pm on Oct 12, 2011 (gmt 0)

Hi secweb. Thanks for the information - recalling we are all asking questions to try to get the information that will help identify the most likely cause/s of the problem.

73 errors came up, but maybe it is because of it being for WordPress?

Wordpress alone does not cause or create errors, so I would start by eradicating them first. 73 may seem a lot but often errors "cascade', so fixing one at the beginning of the file will also solve several later problems. Just start at the top of the w3 report and work through, taking especial care to correct anything reported as a "parse" error - missing semi-colons and brackets, for example. That may not solve the problem completely but means invalid code is nolonger one possible cause of the erratic behaviour.

where would I find the html file for my site since it is WordPress

Not a dumb question at all! The HTML validator allows you to input a uri which saves the trouble of "finding" the html. Otherwise, recall that systems like wordpress are designed to output x/html, so load your page in a browser, select "view source", and copy/paste into the validators manual input box. (The location of the "view source" command will depend on the browser and platform. In ie right click and select the command, in FF it should be under "View" on the main tool bar on both PC and Mac.)

can access pictures on the school network if I work around it.

Can you tell us what your "work-around" is? Otherwise, as Topr8 suggested earlier on, can you access the images by manually typing the uri into the address bar?

lucy24

8:10 pm on Oct 12, 2011 (gmt 0)

I'm a little leery of this whole workaround business. If you can do it for a legitimate reason, the guy across the way can do it to visit ### sites, and next thing you know someone's parent raises a stink and the school's computer access is severely restricted for everyone.

Has anyone yet suggested the opposite approach? Since the problem has something to do with the school's blocking, find out what's being blocked and why.

You may or may not be able to talk directly to the Person In Charge. (At my public library, for instance, the only person who can communicate with the computer technicians is the Head of Circulation. I don't mean for patrons. I mean that's who staff have to go through.) Or Persons In Charge, dual, because it's very unlikely that the one who makes the decisions is the same one who physically executes them.