I have an S3 bucket hosting a simple website serving 1 HTML file & 1 CSS file.
The HTML file seems to be able to locate the CSS file, but the problem is that the CSS file is not rendering correctly for some reason when uploaded to S3 and loaded on a browser. Lines are messed up and center background color extends out all the way to the edge. It looks fine when the same files are opened locally on a browser.
I have tried:
opening with different browsers
making sure metadata is correct for the css file
re-uploading via Console & AWS CLI
Rendering on S3 (not rendering right):
Rendering on local (the way it should be):
metadata content-type: text/css:
bucket hosting checked:
What could be causing this?
I had this same issue. The way I resolved it was by omitting "/" in the CSS reference since it did not have a containing folder in my S3 bucket. It seems regular text editors can automatically do this somehow? I was referring to my CSS file like this --> <link rel="stylesheet" type="text/css" href="/main.css"> and then omitted the "/" resulting in ---> <link rel="stylesheet" type="text/css" href="main.css"> and then it worked.
Related
I have a simple, local HTML file:
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="myclass">Hello World</div>
</body>
</html>
and a simple stylesheet:
.myclass {
color: #456123;
background-color: red;
}
I am deploying my stylesheet to an outside cloud hosting service (AWS S3). However, when I swap the URL out, the styles don't work anymore:
<link href="https://example.s3.us-east-2.amazonaws.com/stylesheet.css" rel="stylesheet" type="text/css"/>
What do I mean by they don't work? The page doesn't display correctly, none of my styles get applied. The page renders as if there was no stylesheet at all.
I've tested all the obvious things, and then some:
The remote stylesheet is accessible, I downloaded it separately by URL and WGet
The remote stylesheet is the exact same as local, byte-for-byte (no diff)
I have disabled cache in my browser
I have hard refreshed
Per my browser tools > network tab, the browser loads the stylesheet promptly (~200ms)
Per my browser tools > sources tab, I can confirm that the entire stylesheet is there, present as a source and readable
I even wrote a script that I loaded into the body that fetched the CSS stylesheet externally, and using a callback after that, created the myclass div. The styles still didn't apply, even when controlling for latency/race conditions like that.
What could be going on here?
Fixed it! I found a similar problem here, which led me to the answer: when CSS files get uploaded to AWS, they get uploaded as Content-Type: Binary/Octet-Stream for some godforsaken reason. (Madness!)
My browser tools didn't raise that as an issue -- I guess browsers are pretty flexible these days -- but it must've still been an issue for HTML rendering.
So the solution is simple: go into AWS S3, click on the file, and change its metadata to hold:Content-Type: text/css. Or you can also set that metadata programmatically if you're uploading these files via an AWS CLI or SDK.
As an aside, you should do the same for JS files, which also get uploaded as binary/octet-stream. For whatever reason, the browser is still able to execute those fine.
I am having a weird problem.
I am trying to build my github page site. So I am writing my html locally and then push it online to see it.
The problem is that Chrome doesn't recognize my css file when I am opening it locally. When I push the changers online or I am using another browser it work just fine
Here is how I import it on my index.html file:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
And when I go to the chrome dev tools
css have turned to chinese
Microsoft edge load the css file normally.
I have tried a couple of different things like:
Using another editor
Creating the file in different directory
trying different filenames
Clearing Chromes Cache
Nothing seems to work
I have loaded again a local a site like this and it worked fine.
Any ideas?
Make sure the file encoding is UTF-8. You can use iconv or just in your text editor > save as.
Here is the HTML I am having problems with:
<link rel="stylesheet" href="http://resources.8thdaystudio.com/neonlights.css" type="text/css" />
I have a copy of the css file in my page's local folder, and when I put neonlights.css in the href, it works. I have a copy in my resources server to use from any of my pages, but it's not applying the css when I do the direct link. Using inspect in Chrome it's not showing me an error loading the file but still not applying the css.
it is observed that the url:
http://71.57.185.233:82/neonlights.css loads as text/css
but http://resources.8thdaystudio.com/neonlights.css loads as text/html.
It's due to your server's configuration as you indicated. I have verified this in Fiddler.
Through some reading about MIME types I figured out that the likely problem is my server. I'm running Servers Ultimate Pro on an Android device and I believe it's sending the file with the incorrect type.
In my html file, I am pulling in main.css by linking it...
<link rel="stylesheet" type="text/css" href="main.css">
However, whenever I open the html file in firefox, it pulls in an older version of the file. Yes...I checked whether or not there were two versions of the file in my root directory - there aren't. There is not another main.css file in any directories. How is it possible that the computer is pulling in an old version of the file and not updating when I save the new css file?
Use "Ctrl + R" after loading the site
Browsers cache files and stores copies of the files locally in order to make it faster.
I don't know how you are hosting the file. If caching is the problem, press CTRL+F5 or CTRl+R to refresh the cache.
When displaying my webpage XMLSummary.html, Firefox v24.4.0 will hang and refuses to load the css file XMLSummary.css. The css file name does not appear in the network debugging console. Chrome v36 and Internet Explorer v8 will load the css file correctly. If I copy the contents of XMLSummary.css to test.css and change the link's target to test.css, the page loads properly.
<!--<link rel="stylesheet" type="text/css" href="./css/XMLSummary.css"/>-->
<link rel="stylesheet" type="text/css" href="./css/test.css"/>
Why does Firefox prevent a CSS file from loading when it has a certain name? Is there a way to keep my original file name, or do I have to rename it?
At first I thought firefox was blocking css files that have the same name as the html file that loads them, but I also have a file named DNSSummary.html that loads its DNSSummary.css file normally in Firefox.
A similar question has been asked before, but was closed without being answered: firefox-does-not-load-css-files. I have already tried clearing my cache and stating charset UTF-8 in both the html file and the css file. I just installed firefox and do not have AdBlock.