I recently finished up a mock site for a project that looks perfect locally. However, when I uploaded it to my server and Github pages, none of the styling is added. I checked the console, and see this:
Failed to load resource: the server responded with a status of 404 (Not Found)
style.css Failed to load resource: the server responded with a status of 404 (Not Found)
/favicon.png Failed to load resource: the server responded with a status of 404 (Not Found)
reset.css Failed to load resource: the server responded with a status of 404 (Not Found)
style.css Failed to load resource: the server responded with a status of 404 (Not Found)
So, I checked the sources in DevTools, and see that in my "resources" directory," there are two folders that don't actually exist: CSS and CSS_reset. Well, "CSS" is there, but it's referenced in my HTML as "css," so that's breaking the styling. CSS_reset doesn't exist AT ALL. Here's a screenshot of my directory tree on my server:
http://imgur.com/AQGY5W8
And here's the HTML referencing the CSS:
<link href="./resources/CSS_reset/reset.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link href="./resources/CSS/style.css" type="text/css" rel="stylesheet">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Monoton%7COpen+Sans:400,600,700" rel="stylesheet">
And here's the link to Github:
https://github.com/pauljhollis/jumpstart
I've uploaded about 15 pages to this server and github, and have NEVER seen this happen before. I have no idea what's causing this, and have checked all through devtools, and removed/re-added the files on my own server several times. Any help is greatly appreaciated.
Edit: Answered. Something changed my code and changed "css" to "CSS" and added "CSS_reset," which isn't even a directory on my computer. This didn't happen on my pc last night, but I'm working on a different one today. Super weird. Thanks for the help/suggestions. I didn't even notice this had happened.
Try:
<link href="../resources/CSS/style.css" type="text/css" rel="stylesheet">
Another method is to use a base tag...
<base href="https://www.[yourwebsite].com/resources/" target="_blank">
...then link to the resource accordingly:
<link href="CSS/style.css" type="text/css" rel="stylesheet">
Also, note the CSS directory. I would make sure that's how it's spelled on the server. Some are case-sensitive, so if the dir was "css" and you called "CSS", it wouldn't find it.
Related
I'm unable to load js and css files in JSP file. In desktop it runs as http://localhost/ but in server it will run as http://localhost/myapp/. How can I ensure it works everywhere?
GET http://localhost:8080/js/jquery.min.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8080/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
In head Head tag I have this..
<script src="/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
Edit: I tried the following and it's still not working..
Edit: even tried the following as suggested in this article
Fixed it.
I moved the css and js folder to src/main/resoucres/static/ and also I had to remove #EnableMVC from the Application.java and then it started working.
Also I had to add {pageContext.request.contextPath} to index.jsp otherwise it wouldn't work on the server since the URL would be http://localhost/myapp/.
<script src="{pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="{pageContext.request.contextPath}/css/bootstrap.min.css">
I have deployed my project on Github and it gives this 👇
errors on the console and how may i fix it?
and link to the git is: https://blessja.github.io/Bottelary/
github repo: https://github.com/blessja/Bottelary
Change the incorrect file URLs in the index.html.
For example, you have written <link rel="stylesheet" href="/css/main.css"> which targets to https://blessja.github.io/css/main.css, which gives a error 404.Instead type <link rel="stylesheet" href="./css/main.css"> or <link rel="stylesheet" href="css/main.css"> which will get you to the right file, i.e. https://blessja.github.io/Bottelary/css/main.css
And try changing all the incorrect file paths mentioned in the index.html file.
Synopsis
After creating a simple HTML template for testing purpose, with no favicon.ico, I receive an error in the console "Failed to load resource: the server responded with a status of 404 (Not Found)" | "http://127.0.0.1:47021/favicon.ico".
I am trying to figure out where this error is coming from and wondered if someone had any ideas to point me in the right direction.
My HTML page looks like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple JavaScript Tester 01</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
When I run this page in Chrome browser and open the console, I see the error message "Failed to load resource: the server responded with a status of 404 (Not Found)" | "http://127.0.0.1:47021/favicon.ico". I am running this on a local IIS server. I see this same error message each time I create a new page.
Is it possible this error is coming from another page on my IIS server that I am unaware of?
By adding this to the header section, you will definitely remove the error in the console log:
<link rel="shortcut icon" href="">
From Chrome 2020 this is the solution :
<link rel="shortcut icon" href="#">
Because your browser always looks for the favicon.ico even if you don't specify it within your HTML.
So I'd suggest just creating one and placing it in the root of your website.
Google favicon generator and make an icon. Name it favicon.ico and drop it in your webroot.
See if this helps.
Also here is a tutorial on favicon: https://www.w3.org/2005/10/howto-favicon
You can add this to your <head> tag
<link rel="shortcut icon" href="#">
Works for me
<link rel="shortcut icon" href="~/favicon.ico">
You can't actually stop browsers requesting the image. However if you do have a favicon it can be cached by the browser which can reduce the number of requests coming in. so if you have the favicon in the root folder of the application the link above should work
It's nothing but an icon on your tab bar. This is the main point. You can also use any icon for your local file. However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. For more information please read this documentation: https://www.w3.org/2005/10/howto-favicon.
It is an old issue apparently, but since I'm just starting to learn coding...
I had the same favicon issue, both with FF and Chrome and unfortunately, none of the suggestions here helped.
Even when I have the "javascript.ico" file in my folder
<link rel="icon" href="javascript.ico" type="image/x-icon" />
this still wouldn't be able to find the icon, so the problem remained.
However, the following helped remove this error message:
just change the ".ico" extension of, both your file and in the HTML code into for example ".png"... problem solved, icon found.
<link rel="icon" href="javascript.png" type="image/x-icon" />
And after doing this, even if you change back the extension into ".ico", it'll still work and the error won't return.
I have faced the issue with using Angular. I have moved favicon.ico from src folder to assets/img and changed href in link tag in index.html:
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">
Also I have removed src/favicon.ico from angular.json builder options.
It seems pretty lame, but the thing that works for me is that I just reload the page and the browser doesn't show any error.
I recently added SSL to my website but it keeps giving me the error:
Mixed Content: The page at 'https://youtubehulp.nl/comingsoon/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic'. This request has been blocked; the content must be served over HTTPS.
While the link to the fontsheet is https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
I also tried downloading the file and then loading the local version but that didn't work either.
Tried code:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="font.css">
#import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
Also made sure all links in the font file are HTTPS
I hope someone can help me with this.
You have a simple typo in your stylesheet https://youtubehulp.nl/comingsoon/css/style.css:
#import url("https//fonts.googleapis.com/css?family=…");
^^
The : is missing after the protocol name. Therefor, it is a relative URL, and when the browser makes an absolute URL out of that using the current URL, the result naturally is https://youtubehulp.nl/comingsoon/css/https//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
And requesting that URL makes your server issue a redirect to http://www.youtubehulp.nl/comingsoon – and that is the origin of the mixed content warning.
hello i have a problem with my 404 error handling.
i added to htaccess:
ErrorDocument 404 /404.php
so in case of typing something like:
www.domain.com/abc
everything works fine with my php page. the problem will be when typing something like:
www.domain.com/abc/
means adding a slash to the url the 404 error page appears but doesn*t load the css file?
if there is someone who could tell me whats going wrong over here, i really would appreciate.
thanks alot.
Since the 404 page will be displayed from any URL, you will need to use absolute paths for any external page assets like CSS files, images, JavaScript files, etc.
So any relative paths...
<link type="text/css" rel="stylesheet" media="screen" href="site.css" />
will need to be changed to absolute paths...
<link type="text/css" rel="stylesheet" media="screen" href="/site.css" />