For some reason CSS won’t update on my domain after uploading to FTP , but updates on other browsers like Microsoft Edge.
It used to update all the time 100% on chrome but for some reason has stopped.
Looking for intel on why this may have happened?
If anyone else has experienced this problem?
And how I can potentially fix this?
THE HTML HEAD
<head>
<link rel="shortcut icon" type="image/png" href="images/favicon-real.png" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Courgette&family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Courgette&family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+SC:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Thasadith:wght#700&display=swap" rel="stylesheet">
<title>Imanto Contact</title>
<link rel="stylesheet" href="main.css">
</head>
In most cases, this happens because chrome caches stylesheets. You can try changing the link rel in your html.
<link rel="stylesheet" href="main.css?v=2">
(style.css is your stylesheet filename)
This will make all browsers load your stylesheet from server. YOU DO NOT HAVE TO CHANGE THE STYLESHEET FILENAME, JUST CHANGE ABOVE LINE.
Let me know if this doesn't work, I will check again.
You also can press the shortcut for a hard reload ctrl+shift+r.
In this case, every extern style/code sheets are reloaded.
Another way is to open the dev tools using f12 and then press the reload button long and click on hard reload or cache reload.
Sorry for my bad English.
Related
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.
First, I should mention that I am hosting on a .vip website. My code is simple:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="icon" href="img/Pic.ico" type="image/x-icon">
</head>
This works when I host locally through MAMP, but neither the title nor the favicon are showing up on Chrome etc. on any desktop I try.
To add to the mystery (which may be related) none of my extensions are appearing on the URL. For example, if I have a link to a page "dj_page.html", whereas on MAMP it does show [SITE]/dj_page.html, and on my website I would like it to show
[SITE].vip/dj_page.html
Instead it just remains at
[SITE].vip
I have cleared the cache on Safari, tried several different computers, but not even the title is showing up properly. Also, does not work if I change the code to, for example,
<link rel="icon" type="image/png" href="http://otranscribe.com/favicon.png">
You can use this:
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
SOLUTION: I was hosting on Heroku and nothing was working. Switched over to Azure and everything worked no problems...
I am using this format for linking to my favicon.
My favicon.ico file is in the same directory as my HTML files, but for some reason it does not appear when I upload it to my web server. I cleared my cache, closed my browser, and re-opened it, but the favicon will still not appear.
If someone could explain why this is I would really appreciate it.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
Edit: Also I do not know if this would affect it, but there is a default favicon that appears on my web server. I do not know if it is possible to overwrite this.
Edit 2: Not sure if this makes a difference, but this is the basic structure of my head.
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="description" content="Home">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
According to this answer it looks like it should be rel="icon" instead of rel="shortcut icon".
Also, if your favicon.ico is at the root of your server http://example.com/favicon.ico and your page is in a subdirectory http://example.com/blog/, the browser will try searching for favicon.ico inside the current directory http://example.com/blog/favicon.ico, which would result in a 404 error; to avoid that, you should set href="/favicon.ico" so it always points to the root directory, no matter in what subdirectory you are.
They usually cached. force to refresh as well.
get it from your directory
Sometimes /favicon.ico helps. Try this though:
<link rel= "shortcut icon" media="all" type="image/x-icon" href="http://URL.tld/favicon.ico" />
<link rel= "icon" media="all" type="image/vnd.microsoft.icon" href="http://URL.tld/favicon.ico" />
This adds IE support.
Based on type's attribute value.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
1-Create an image folder on yout root directory (the same as index.html) and just put your favicon.ico inside this folder.
2-href="image/favicon.ico"