1

So for months on this site I've had paths to my CSS files that look like:

/css/syles.css

and they've worked fine.

Today I updated the file and saw my changes weren't being reflected in the browser. In fact, in the Chrome's Inspector's Network tab the CSS file wasn't even loading.

The only way I could get it to work was by making the path absolute, e.g.:

http://www.example.com/css/styles.css

There is no caching service on the host, nothing like Cloudflare and, of course, I cleared my browser cache.

It's not a big deal, but I'm just curious as to why this happened.

Host is your average shared server LAMP stack.

Improve this question
3
  • 2
    Your CSS has become a Sith Lord and now only deals in absolutes.
    – John Conde ♦
    Commented Jul 5, 2016 at 22:26
  • 3
    Do you have a base element referencing a different domain? "changes weren't being reflected in the browser" - but the (old) stylesheet was still being applied? Or no styles were applied? "in the Chrome's Inspector's Network tab the CSS file wasnt even loading" - what do you mean exactly? What was the server response? Or was there no server request (ie. it was pulled from the browser cache)?
    – MrWhite
    Commented Jul 5, 2016 at 23:00
  • What URL are you accessing your site with? If you normally access it though a server, but switched to loading up file:// URLs, you would see that problem.
    – Stephen Ostermiller ♦
    Commented Jul 6, 2016 at 0:35

2 Answers 2

Reset to default
2

In Google Chrome, I would Inspect the DOM of the web page where the stylesheet is not loading:

Ctrl+Shift+I

Locate, and right-click the stylesheet element:

<link rel="stylesheet" href="/css/syles.css" />

Click Open in new tab.

If you receive a HTTP 404 Not Found error, then check the address bar to ensure that the absolute path of the file is what was intended.

If the absolute path looks incorrect, then modify the file path on your document appropriately.

On the other hand, if the path is correct, try refreshing the stylesheet (ignoring cached content) using:

Shift+F5

If the stylesheet loads properly, then go back to your web page and refresh the page.

Otherwise, double-check to make sure that files are uploading properly to your server.

Improve this answer
0

A thought: Is the live site secure(https?) It could happen that the relative URLs resolve to https://example.com/css/styles.css and the server is not able to handle static content via https.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.