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.
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.
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.
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.
It doesn't exist:
this is a 404 not found:
http://www.thesanfordcenter.net/CircularContentCarousel/css/demo.css
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
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
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
Related
I'm working on a web application using ASP.net.
Sometimes the .css and .js files are not working while debugging with localhost.
When I upload the page to the webserver all is working fine, so it must be a local problem with the localhost.
Normally it helps to clear the cache or use a different browser.
But now none of the browsers are working, even though clearing the cache (I tried chrome, IE and Edge). By inspecting the page I get the error
404 not found
The files are included like this:
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
The path should also be ok:
http://localhost:63714/Styles/Site.css
Any ideas how to solve this? Thanks
I am making a website using PHP. While completing it I tested it on Firefox only. Today when I tried to test it on other browsers (Opera, Chrome & Internet Explorer) I found some problems in my CSS. When I made changes to my CSS file, none of these browsers except Firefox is showing changes made in the CSS file.
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
So far what I have tried after Googling for a long time is
Cleared Cache memory of browser
Put "?v='+1 everytime'" at end of style.css
Refresh the webpage using 'ctrl+f5', 'ctrl+r' etc.
Any help ? Thanks in advance....
This is intended behaviour by most browsers. Whenever you try to load a page, if any resources are already present in browsers' cache, they will be loaded from there.
You have two options:
disable browser cache for your preferred browser (some browsers allow you to disable cache for specific domains)
make your HTML always refresh the resource, by appending a non-repeating parameter to the requested resource file name. I personally use: ?v=1482939287 (where 1482939287 is the timestamp). This will make the browser always refresh the resource, as it will ask for a version that's not existing in browser cache.
Example: <link rel="stylesheet" type="text/css" href="/css/style.css?v=1482939287">
Update: You can flush the cache for a webpage by opening Dev Console (Ctrl+Shift +I), right-click-ing on refresh page arrow (while Dev Console is open) and selecting Empty Cache and Hard Reload. That is emptying the cache.
You can also disable it, as suggested above, by opening Dev Console, going to Network tab and checking "Disable Cache" checkbox right under it. Please note that cache is only disabled while your developer console is open.
There are several solutions for this. I will list you some of my options below.
Unique identifiers to files though parameters
Adding a parameter behind the file as a kind of a version number may help.
In php you can use time() to get the current timestamp or unique() to get a unique string.
Cache settings server side
You can also find some .htaccess settings for caching specific file types on the server side. For performance reasons you should do this for production, too.
Browser Dev Tools
Another way is to open your Browser Dev Tools (mostly F12) while developing. Most browsers like Chrome and FF provides a cacheless enviroment when your Browser Dev Tools are open. As a example in chrome you can disable caching explicit.
My suggestion
Or even better use Task Runner to accomplish this. The keyword to search for is 'cache bust'. As example you can run gulp for concat, versioning, and let it connect the right css files you want to. This is specially suggested for development phase.
regards
Gkiokan
Can someone please tell me why the CSS styles for this page aren't loading on Chrome? Here is the link: http://otownsend.ca/html/lokafyinfographic.html
I would greatly appreciate anyone's help.
Press F12 and go to the console tab. And you will see message:
Failed to load resource: the server responded with a status of 404 (Not Found)
That means your css files are unavailabe somehow.
Your CSS loads okay. You can actually view it here.
If you open the console F12 on Windows, you'll see the following error -
Failed to load resource: the server responded with a status of 404 (Not Found)
http://otownsend.ca/html/css/bootstrap.min.css
So it looks like you either haven't included the bootstrap.min.css file on your server or the href you've provided is wrong.
Is this correct? - <link href="css/bootstrap.min.css" rel="stylesheet">?
Try replacing it with this - <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel="stylesheet">
Similarly, it looks like you're also missing the full-slider.css file. Try providing the right path for your files and it should work fine.
UPDATE -
Looks like you're having a cache issue. There's a simple workaround to this -
Each time you make an update to your CSS file, have a new query string at the end of the file name, such as href="../css/lokafyinfographic.css?version=1". If the user has lokafyinfographics.css cached in their browser, the user might not be able to see your latest changes. So, if you add a query string ?version=1 or so, it will force their browser to look for that file.
Unless, your server is programmed to do anything with the query string, the browser will safely ignore it but loads and caches the new CSS file. So, each time you make an update, have a new query string like ?version=2 or so in your href.
Hope that helps!
I'm developing a Chrome extension that has an options page. And I am willing to style this page same as Chrome options page is styled. I found that there is a file
chrome://resources/css/widgets.css
that holds this style (it is listed in "Developer Tools > Sources"). However, if try to load it in my page either directly from HTML
<link rel="stylesheet" href="chrome://resources/css/widgets.css" type="text/css">
or from CSS
#import url("chrome://resources/css/widgets.css");
then get this error printed in the console:
"Not allowed to load local resource: chrome://resources/css/widgets.css
It looks like I'm missing some permissions in my manifest.json, but did not find anything suitable on the developer's pages (notice it lists "chrome://favicon/", but that's it).
Anyone knows a solution?
P.S. Yes, I have copied this file into my extension's folder, and I got what I want, but the smart and proper way using this file (IMHO) is loading it directly from Chrome resources.
Short answer: No, you can't access chrome://resources... from an extension.
First, it's blocked on purpose, thus why you see "Not allowed to load local resource." Second, you really shouldn't rely on Chrome's resources, which can change in any version.
I have a page which works locally but when deployed, none of he CSS works. in Firefox I get these errors. I never used to get this before. Any idea why this may be happening?
Also, when viewing the source of the page I can see this
<link href="/Content/css/foo.css?v=1.0" rel="stylesheet">
The resource from this URL is not text: http://foo.iat.company.local/Content/css/foo.css?v=1.0
</link>
The errors you're showing in console seem to suggest that the first line of your JS files is <!DOCTYPE html>, which it shouldn't be for JavaScript files!
I suspect that your links to the stylesheets aren't working and it's instead returning a 404 page (the screenshot certainly seems to suggest it's returning a document with HTML in it).
To try and double-check:
open up the page in Firefox and view source (right-click and 'View
Source');
In FireFox source view the assets URLs will be hyperlinks;
try clicking on the link for one of the JS files and see what gets
displayed.
I suspect you're going to find it returns you an error page and not the JS you expect!
If that's the case, you need to take another look at your folder structure and try and work out why your markup is pointing at the wrong place.
Check what your CSS files stored in correct place. Try open URL to CSS in browser. Also check in Firebug in tab Network what files loaded and from what URL. There is similar to your pages tried load CSS files from incorrect URL and got page for 404 error.
The problem was that the Content folder didn't have permission that it required. I added he following users to the security tab of the properties window of the Content folder and set permissions for those users and it all worked fine.
creator owner
iusr
network service
users
iis_usrs