10

The CSS is not loading for this page of the website I am working on: http://www.thesanfordcenter.net/sanford-center. It happens only in Chrome, but is not a caching issue as the same problem is happening in Chrome on another computer and I have cleared all browsing and cache history in my browser.

It does seem to be working correctly in FF and IE. The sub pages on this site, which use a different template seem to be working fine.

I am not sure what it is that is causing this. Any help would be appreciated.

Phorden
  • 994
  • 4
  • 19
  • 43
  • You have created two 'stylesheet' folder + you haven't set any body tag on all of your css files, check it out please my friend – A.Mokhtari Jul 25 '13 at 20:10
  • 1
    could you show the code line where you are importing the style sheets ? Also is only certain styles not appearing or is it all styles ? – Muljayan Jun 07 '19 at 03:05

8 Answers8

22

In Google Chrome

>> goto settings
>> search for cache
>> clear browsing data
>> check cached images and files (the past hour / day)
>> clear browsing data

and goto your webpage and press "Ctrl + r"

Hope this solves your issue Cheers.

Shyam
  • 283
  • 3
  • 5
8

Make sure that your CSS and HTM/HTML files use the same encoding !

If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well.

IE and Edge are not fussy : stylesheets are rendered regardless of the encodings. But Chrome is totally intolerant of unmatched encodings.

I tried every solution/suggestion i could find all over the Internet before i noticed, in my text editor, that i was using different encodings. Once I saved the stylesheets with the same encoding used for the web pages, the problem disappeared.

Bluez
  • 81
  • 1
  • 1
4

Comparing css links between the page you referenced and sub-pages, you have a "media" attribute in your link:

Problem:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px" />

Working:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" />

Try removing the "media" attribute and it should work fine.

More specifically, it does not appear that "only" is a valid operating for the media attribute. See this W3Schools page for details.

lwitzel
  • 591
  • 5
  • 15
0

It doesn't exist:

this is a 404 not found:

http://www.thesanfordcenter.net/CircularContentCarousel/css/demo.css

Lyn Headley
  • 11,368
  • 3
  • 33
  • 35
  • I did remove that line. It did not fix it. Thank you for pointing it out though. I need to clean up my code a bit. – Phorden Jul 25 '13 at 20:11
0

Are you certain the path is correct? The developer tools in Chrome show the following error.

Failed to load resource: the server responded with a status of 404 (ERROR: The file requested could not be found.) http://www.thesanfordcenter.net/CircularContentCarousel/css/demo.css

Ryhnn
  • 456
  • 1
  • 5
  • 16
0

The problem could be caused because the browser can't load files:

Failed to load resource: the server responded with a status of 404 (Not Found) error in server

Community
  • 1
  • 1
Michal Svrcek
  • 25
  • 5
0

Check your source where you are calling your code. The 'stylesheets' folder is coded as 'StyleSheets'. Possibly the case-sensitive is messing it up.

I'm thinking maybe since the expstickybar.css file is rendering correctly and it references the 'stylesheets' folder

seth yount
  • 132
  • 6
0

In my case, I had used the wrong Content-Type header (text/plain instead of text/css). The correct header should be "text/css; charset=utf-8". Unfortunately, no error message was displayed in Chrome.

MasterCarl
  • 438
  • 3
  • 9