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!
Related
So I'm having this really weird bug with my new server where the CSS won't update in the browser. Refreshing and clearing the cache doesn't work. I then opened up FileZilla to see if the updated CSS file is actually being uploaded to server using FTP, which it is, and then when I drag a copy of the css file to my desktop, the css file magically updates. The PHP file updates just fine.
Here's how I include the css: <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
I have no idea what is happening and how to fix this so any help would be greatly appreciated!
You could have any number of issues, but I'd like to point out a cool tip when using Chrome.
On your page, with the developer tools open if you press and hold the reload button you get a great option to clear the cache and hard reload!
This is very handy to make sure you have the "freshest" copy while developing.
Update:
As for your scenario (after reading updates) it sounds like an HTTP header issue with your CSS file.
Check what HTTP headers are being sent with your CSS file response. If you are not specifying a cache header it will likely try to cache for you. Set an expires header (in the past) when in development, but far in the future when in production. In the Network tab of your developer tools (most browsers) you should be able to see these headers, or you can use a too like Fiddler that will let you deeply inspect your network traffic.
Alternatively if you can't easily tweak the HTTP Headers, then set a far expires header, but ensure the path to the file changes whenever you make a code change. Options include:
adding a time() stamp (always changes (yeah!) but doesn't cache (boo))
add the version control # to the file URL (works great, but you need to manage the updates properly within your tooling)
something fancier that creates a generated "fake" path to the file that auto changes on any modification to the file... but also loads the URL as expected, and sets the cache to "forever" (max 365 days according to the HTTP specs)
You may try queries to force the browser to load fresh CSS when it loads. To do this
<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">
If you are comfortable with php you may try below code to force the browser to load most updated CSS to load. To do this
<link rel="stylesheet" type="text/css" href="http://example.com/style.css?d=<?php echo time(); ?>" />
This will ensure browsers always load fresh CSS with last modified time stamp.
Hope this help you.
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
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
So there is this site-> http://www.raudsilla.ee
This problem occurs only in Chrome- whenever you press refresh the page loses its CSS. Weird thing is that if you look the code of both- after and before refresh, they look exactly the same. And again, only happens in chrome.
I have tried quite may things, so far no luck...
I wouldn't like to rule out anything at the moment, so any help appreciated.
The browser is outputting javascript errors, if you check the code, you're calling jQuery's document ready before the script is loaded, as it says, "$ is not defined".
After fixing the existing javascript error, it should load correctly.
I am seeing the same behavior on one of our own sites and started looking for a cause. The only conclusion I could come up with for now is that it is caused by the Mime Type of your stylesheet. This conclusion is supported by the behavior on our side.
Update:
There are three ways in which Chrome seems to load the CSS file:
As a fresh request, no cached version available, our server returns HTTP 200 OK, with content-type text/css. This works fine.
From the cache, without consulting the server. Chrome has cached content-type text/css. This works fine.
As a request with a cached version available. Our server returns HTTP 304 Not Modified, with content-type text/plain. This does not work.
After some crazy tests, I found the solution by adding "?" to the url css file.
Example: href="../_css/setup_system.css?" type="text/css"
site.css was not loading in Chrome. I added the ? in the CSS url and my styles started appearing.
Shift + Refresh solves the problem so it must be a cache problem.
PS . The site takes quite a long time to load, considered optimising?
desable addblock and refresh, if the website loaded correctly check the plugin
Open the console(ctrl + shift + c) and then network panel and check the disable cache button.