I was experimenting a component for my React app so I had to include the following stylesheets in my index.html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
After that, I was unable to get rid of them. Even though I removed those codes from index.html but I can still see them from Chrome inspector. I cleared everything for my app but those lines still exist. Why is that? How do I get rid of them?
Try to remove chrome cache. Go to Network and Disable Cache on developer window. If doesn't work remove cookies.
Related
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>
When I open my index.html file in Safari, it shows everything, styled with my CSS file. When I open my index.html with Google Chrome, it appears to only show the HTML. I do not use webkits, and I only pair my HTML to my CSS using this in my head tag in my index.html file:
CSS:
<link rel=stylesheet type="html/css" href="stylesheet.css">
Does anyone know how I can open this in Google Chrome so it uses my CSS file like Safari does?
Thanks in advance!
First clear cache of browser and disable some html/css validation extension.It will be sure that it will work. and just follow the css attachment syntax below.<link rel="stylesheet" type="text/css" href="stylesheet.css">
Try using
<link rel="stylesheet" type="text/css" href="stylesheet.css">
The rel tag should have some quotation marks and the type should be text/css for compatibility.
I had the same problem with updating CSS, try ctrl + f5.
It also forces to reload the cache.
And if this is the problem, you can try to clear the cache in the browser.
I was inspecting the network tab in Chrome, and I saw that some CSS files are being downloaded twice. I don't know why, but just the ones from a CDN (I don't know if it's the problem, I just noted it).
I'm not using a Service Worker to control it, and it's only included once in my HTML (when I click to see what line is calling the file, both files point to the same line).
Here's a screenshot:
Here's the HTML:
<link rel="stylesheet" crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u">
<link rel="stylesheet" crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN">
<link rel="stylesheet" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/alt/AdminLTE-without-plugins.min.css" integrity="sha384-WG5KI+rc1FCbcov6sW97p+sxrnYctXfkPWh+TtV+NHpIW2/svd8GC7v/PFFATsCh">
<link rel="stylesheet" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/skins/skin-blue.min.css" integrity="sha384-HpPw4BJmJc5KUoRUqCQwYKo0Kk94VbzanZQdGrG0m5h2dnUTxN0FHRDmKNyv5ymR">
<link rel="stylesheet" href="https://infomec.net.br/assets/css/main.css?v=2.8">
The same happens in the incognito mode.
You can visit https://infomec.net.br and inspect it (login: stackuser, pass: stackuser; just created this user for it).
I would love any help, trick, or direction to look, since I've already done a lot of researches but nothing has worked.
Chrome 56.0.2924.87 (64-bit), Windows 10 (Version 1607, build 14393.693)
EDIT
What I tried:
Disabled any Chrome extension - Same thing
Disabled asynchronously download of 2 CSS files, they were being downloaded only once, now they're being downloaded twice too.
Removed integrity from links - WORKS!, but... why?
So, I just inspected it using Edge, and...
... same issue, but it shows that one is being downloaded by XMLHttpRequest... why?
Try removing the integrity keyword from the CDN and check if it works. For me it is working on removing it. The problem might be because of many reasons some of them being your extensions installed, your browser version etc.
My css appears to be being cached somewhere. I've uploaded a new css file and none of the changes have taken place. I thought that maybe it was being cached serverside so I slept on it and still, no updates to my css. I know it's not being cached in my browser because I've cleared that three times, and the tech support says server cannot cache. I need this css to take effect asap. Help would be much appreciated.
<link rel="stylesheet" href="~Content/site.css?t123456789" type="text/css" />
is what I have in my head tag of my _layout page.
You could try forcing the browser to refresh the css file by adding a timestamp to the link:
<link rel="stylesheet" type="text/css" href="/path-to-your-css/styles.css?t=12345678910">
I'm using html and css for the first time. On one computer the html refers to the css appropriately, but on another the css is not referred to at all. I think I'm linking to the css correctly in the html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
On both computers, I'm using the latest version of Firefox.
Any thoughts as to where I'm going wrong?
Thanks in advance.
Are you using your browser's developer tools?
Right click in Firefox and go to "Inspect".
Find the Web Console tab. There you will see if the reference to the css file is valid or if it returning a 404, not found.
Also, your reference should be href="/css/mystyle.css", to keep a clean root directory of the site.
Also, you might want to self close the tag:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
And if that doesn't help, run your code through the w3c validator: http://validator.w3.org/