404 error handling with htaccess and css - html

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" />

Related

JSP - CSS file and JS files aren't loading at all

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 need help linking my external files on my websites server

Recently re-did all the files to my website, and uploaded them to the 000webhost server they're located on. It's just some basic HTML but is heavily reliant on the CSS to make it look good. So when I checked it out to see that it didn't work, I realized not only did the javascript not work but the CSS too. I think it might be an error in my code, seeing as all the other files work fine. Any help would be appreciated.
I've tried redirecting the file paths, adding the head tags, deleting and re-adding the file to the server, and waiting to see if it was a server issue.
Here is the first couple of lines to my index HTML file:
<html>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="images/amistufffavicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
I really just want to make the HTML pages look good, and an explanation in case it ever happens again I know what to do.
first, use the {} logo on the top of the text editor to make your code show up. all you have to do is highlight your code, then click the {} button and it will format it for you.
your CSS and JS code actually looks like the HTML tags for these imports.
One bit of advice, if you have issues making several files work, just write everything in your HTML file
instead of
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
just do this:
<html>
<style>
/*write style here*/
</style>
<script>
//write script here
</script>
</html>

How to load CSS in the right way?

I am currently building a new website, I only got a css problem right now.
I ve got this between my head tag:
<link rel="stylesheet" type="text/css" href="css/style.css">
Only the problem is it doesn't load at all, tried things like: addin base url, put whole url in it.
Where I think the problem is, the .htaccess, when i remove it it works, but i still need the line for other things:
RewriteRule ^(.*)/(.*)$ index.php?region=$1&summoner=$2 [L]
Your css file is located at https://lds.gg/css/style.css, but your index.php file is not secure. You are likely going to have mixed content issues. Still, if you link to your css file like so:
<link rel="stylesheet" type="text/css" href="https://lds.gg/css/style.css">
you should be fine.

Why am I seeing a 404 (Not Found) error failed to load favicon.ico when not using this?

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.

Loading Google Fonts over HTTPS still give MixedContent 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.