CSS is perfectly loading on the offline webpage (localhost) but on the live website, CSS is not loading.
I am using hosting and domain from the biz.nf website.
I used bootstrap 4 on this website.
My index.html head code:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.site.c1.biz/css/style.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
I saw your website in the inspect mode
its showing style.css is 403 forbidden in the network tab
Check with it
you can check here ERROR 403 in loading resources like CSS and JS in my index.php
Maybe you try using relative css path or check your webserver configuration, because loading the CSS file returned a 403 forbidden error code.
Finnaly I figured it out,
The problem was caused because my images was not in the same directory as of index.html
I tried many things.
Webpage inspect was throwing some error like - anime.min.js error in front of img name which was completely useless.
Many said it as a broken img but it's a different issue.
Related
So I've been creating a project on my localhost server for the first time using wamp (I've only coded html/css/js in repl.it before this) and for some reason, my css will not
stay on my page. When I try changing styles using my CSS file, it shows up when I refresh, but then very quickly disappears. The following pictures represent this (NOTE: I had to record and slow down the refresh just to see that it did change):
this appears right after refreshing
milliseconds later, the CSS no longer does anything
The following code is the link to the css in my html file (have some other script tags in there as well):
<html>
<head>
<title>Home Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap-icons.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="/PHP-Login-System/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
An image of directory tree (trying to link style.css with index.php):
directory tree
As far as I know, since my styling does show up for a brief moment, I don't think the error could be in my linking between the files, but I could be wrong. Any comments are appreciated.
Everything looks good to me, I think the problem is coming from wamp server, because like you said, your css styles is showing up and disappearing.
My advice is:
Uninstall wamp total , download a fresh copy from the internet.
Restart your computer, then reinstall the new copy you downloaded
I've been following the Font Awesome guides how to use their kits, but when I inserted this code at the end of my body tag, I get an error, and I can't use any icons.
<script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>
Here is the full HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="imgs/favicon.ico" />
<link rel="apple-touch-icon" href="imgs/logo192.png" />
<link rel="stylesheet" type="text/css" href="scss/main.css">
<title>My title</title>
</head>
<body>
<div>Facebook<i class="fab fa-facebook"></i></div>
<script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>
</body>
</html>
And here is the error message:
Access to script at 'https://kit.fontawesome.com/a4c00a89bc.js' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://kit.fontawesome.com/a4c00a89bc.js net::ERR_FAILED
Any idea?
It looks like JavaScript Debug server caused the problem, that I was using because of the Live Edit plugin. As I restarted the server, the script worked. Also, if I just opened the html file, it worked properly. But the problem always occur at first start of the JavaScript Debug server, when it opens up the browser.
A quick note: put the script rather between the head tag, because it inserts a stylesheet into the html file.
(I am using JavaScript Debug server in phpStorm)
I had the same problem. It turns out that I added domain restriction of my font awesome kit, which you can configure on the Font Awesome website. I added mydomain.com, while the correct way is to add *.mydomain.com to allow any subdomain in my website to use the font awesome script. The problem went away once I fixed the error.
You can check the domain setting of your kit in your Font Awesome account to see if it is the cause of the CORS blocking problem.
i tested it locally and it's worked but when i upload it to my web host, some of the css code is not fully loaded, only some of the code inside of it are loaded. what happen pls i need help. i already checked the path.
thank you :)
this is from the host
this is from the local file
<html lang="id">
<head>
<title>Weebs Desu! official discord website</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />```
You need to provide more data to give us some clue, but here is a thing.
Maybe because the version of your css is not updated in the hosting yet. You already change your css code but the result still same as before. The solution for this is you can add some v?=1.10 behind style.css.
So the result will be style.css?v=1.10, so the browser wont load the older version of css.
The number ?v=1.01 can be anynumber as long as greater than before (It works like patch).
If it's working locally but not on your web host, your style.css filename casing might not be matching what you have in your <link> tag.
For example <link rel="stylesheet" href="style.css" /> should mean that your filename casing should also be style.css. Not Style.css.
Also hard to debug without a live example provided btw!
I hope you are doing well.
The webpage does not load correctly on the first load, but it works perfectly whenever I refresh the page. Also, on the first load, I get an error(Failed to load resource: the server responded with a status of 404 (Not Found)).
First load:
On refresh:
Main index file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/editor.css">
</head>
<body>
...
<!-- SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/custom.js"></script>
<link rel="stylesheet" href="app.css">
</body>
</html>
Let me know if you have any questions
Sorry, if it's been already asked. I searched everywhere and I cant why that's happening.
Thanks in advance
First of all, you don't have to be sorry for asking out any questions. No one knows it all.
To the main question, it seems you have too many scripts loading when the site is open and it times out before it could completely finish loading.
It only finishes loading after the refresh as some of the files are already loaded.
Import only CSS and js files you need and try moving some of the scripts to the bottom end of the body tag.
Use CDN URL to load the imported scripts faster
The most common reason for that is a slow server, which takes more time to handle the request than the request default timeout. So, when you refresh, many of the assets are loaded from the cache, allowing the assets that failed to load on the first time to load properly.
Some solutions to this problem is:
Use CDN urls rather than loading the assets from your server <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> instead of <link rel="stylesheet" href="css/bootstrap.min.css">
Use Lazy loading for assets that are not used immediately. More about that here.
Sometimes, the server itself is not the bottle neck, not in terms of computation I mean, but the network is! So, make sure your server's network has enough upload speed to serve your app's needs.
I can also see that you are linking a CSS file app.css at the end of the body, and I guess this is what causing the first image you posted, typically it's a good practice to load the CSS files before the body, and the JS files after it, so that the page looks it loaded faster.
I created a simple html file which should display svg image:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<img src="D:/Angular/hello-world/node_modules/bootstrap-icons/icons/star.svg">
</body>
</html>
It displays fine in Google Chrome but Firefox displays nothing at all but that's another issue...
When I'm running exactly the same code but in an Angular project inside index.html Google Chrome shows the "couldn't load" image. Does somebody know why in a pure html file it works but when running from Angular project it stops? And why firefox displays nothing?
For an Angular app, images need to be in a specific folder for it to be able to find said images. Move (or copy) the image to src/assets and use the path assets/star.svg.