CSS and JS sometimes not loaded in localhost even though clear browser cache - css

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

Related

External style sheet not updating in Chrome 74, but other files do

I'm building a site in Chrome 74 using Notepad++ and XAMPP on localhost.
I have an index.php main file and an external style sheet index.css.
It is connected to the main file like so: <link rel="stylesheet" type="text/css" href="index.css">
After making a few updates to index.css I couldn't get Chrome to view them. Originally I thought my css was wrong. But after pressing F12 in Chrome and looking at Sources and checking the index.css file I saw that the changes I had written weren't there.
The changes have been saved in Notepad++, browser page has been refreshed. I even looked at index.css using good old regular notepad just to be sure.
I have also tried restarting the browser, restarting XAMPP and then restarting my computer. Still the same.
The interesting thing is, changes made to index.php are being updated successfully. It's solely the changes to index.css that aren't. It's as if Chrome does not reload index.css but keeps an old version of it.
It has happened to me before, but last time the problem sort of just went away after a while and Chrome started updating index.css. Now I want to know why it happens.
Does anyone know why Chrome does this? Help much appreciated :)
To be clear: As of the moment, no changes made to index.css is being loaded by Chrome. Even stuff like body { background-color:red; }
The file is being cached: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
Usually, with the default configurations, dynamic pages (.php) are not cached and static files (.css, .js, etc.) are cached.
You can:
Reload the page while pressing the shift ( ⇧ ) key
Clear caché and then reload
Implement a caché strategy for development

Tomcat 8 Fav Icon cannot be replaced

I am beginner so take it easy on me.
Recently i have developed a web application in java and i have deployed it on Tomcat7 and it worked fine but when i deploy it on Tomcat8 the default fav icon cannot be replaced although i am using the following:
<link rel="shortcut icon" href="/url/logo.png" type="image/x-icon"/>
<link rel="apple-touch-icon" href="/url/logo.png">
And the browser locates the photo perfectly it's not 404 Error!.
I think the problem is related to tomcat8 because the app worked fine on tomcat7.. what should i do to solve the problem ?
With all the comments: Works for me (tried on 8.0.32).
Make sure
that the Icon is indeed available where you expect it
that the other browsers didn't cache the image
that you don't have a <base> tag in <html><head>, so that the browser would expect the image somewhere else than you.
You can use the developer tools (hit F12) and check what file Firefox is loading, its response code and content and response headers.
You might need Shift-Reload in order to bypass the cache, or explicitly flush the cache before this operation.
You can also experiment with temporarily declaring other images and double check on all browsers, just to make sure you're indeed bypassing the cache.

Chrome blocks request for google fonts when using appcache

I am using Roboto from googlefonts.
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
After adding HTML5 Application Cache chrome blocks the request for the css file.
Without using Application Cache (simply removing manifest="myApp.appcache") everything is fine.
Could anybody explain me why this happens and how to fix this?
Note: The CSS-file is not added to the application cache manifest file.
I believe any resources not included in the .appcache file are blocked.

CSS file revisions not recognized when reloading page

I have had this problem for a while now. There are times when I am working on a CSS file and I overwrite it by FTP-ing via FileZilla. When I reload the page to check my new changes, it doesn't load my new file. I can clear cache, reload, reset, etc, nothing will reload it. It happens the same accross IE, FF, Chrome, Safari, etc. If I delete the CSS file from the server, it is still being loaded up, but I don't know from where. The website is WordPress based but has no cache plugins. After a while, it will load the new file, but a while has to pass.
http://skyhangout.com/bellavistadental/
What in the world is causing this?
I had the same problem a few times! I can be obvius, but do you delete the cash from the dashboard? It is the only thing thats works to me (sometimes).
A common and effective method of cache busting is to append a query string ?example to the end of the stylesheet link:
<link rel="stylesheet" type="text/css" media="all" href="http://skyhangout.com/bellavistadental/wp-content/themes/tOrange/style.css?v=1.0" />
Then you just change ?v=1.0 to ?v=1.1 or something similar each time you update the CSS file.
This makes the browser think it's a new file, so any previously cached version is ignored and the new CSS file is downloaded.
If this doesn't fix it, it's not a browser cache issue, and is probably server-side caching (on the server level, not the Wordpress level), which you'd need to speak with your webhost about.

CSS not working in Chrome

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

Resources