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.
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 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.
I have configured an apache server with document root to public_html folder and i want to keep my css files in the above directory as following code
<head>
<meta charset="utf-8">
<title>Name</title>
<link rel="stylesheet" type="text/css" href="../css/login_page.css">
</head>
Using above code i am not getting style changes related to css but if i keep my css file in public_html folder and change it to
<link rel="stylesheet" type="text/css" href="login_page.css">
there seems no problem. I want to know how to make the first code work.
Maybe it's about cache? Have you tried clear cahce and reload the page?
To me it seams impossible, the apache server can only send the file in your public_html.(for security reasons)
More that the server side, your browser will request a file that it's not in the domain.
The only solution it's to be in your public_html.
Edit:
The only files that you work with were are above are php files of config files, apache will never work with files that are above the public_html
It's not clear enough for me, but if your problem is that css file in browser doesn't update when you edit it, the solution is to disable cache for your site
In any browser: devtools -> network -> disable cache checkbox example image
you cannot reference files, folders outside your public_html folder. Hence the name of the folder. It's by design and it would be a BIG security risk if this would be possible.
I am trying to make glyphicons work with my local project!
i have created a virtual host called backend.mvc
now when ever i try to use glyphicons i get the following error:
"NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.woff"
glyphi...ar.woff
"NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.ttf"
however the path exists execpt from the http:// so my question is how can avoid this and make the glyphicons work?
edit
Ive added the following to my head:
<link type="application/font-woff">
<link type="application/vnd.ms-fontobject">
<link type="application/x-font-ttf">
<link type="font/opentype">
However this did nothing :(
Update
Using apache
Also please note that this is for web and NOT mobile!
If you're absolutely sure that they're not in the incorrect place, then the most common cause I come across for problems like this when it comes to serving web-fonts is that the server isn't configured to serve the correct mime-type for the files.
According to HTML5 boilerplate these are the mime-types that you should be using when serving web fonts:
woff: application/font-woff
eot: application/vnd.ms-fontobject
ttf & ttc: application/x-font-ttf
otf: font/opentype
The fonts directory should be in the same dir as the css directory by default, not in the css subdirectory
Also check your paths in the bootstrap.css
Could there be any problems moving favicons and apple touch icons to a subfolder?
Like:
<link rel="shortcut icon" href="/images/favicons/favicon.ico">
<link rel="apple-touch-icon" href="/images/favicons/apple-touch-icon.png">
Yes, some browsers start downloading /favicon.ico at the same time they start downloading HTML document. If there's no file you'll get an extra 404 in your server log and the browser will have to make an extra HTTP request when it recognizes the icon is elsewhere.
A quote from Yahoo's Best Practices for Speeding Up Your Web Site:
The favicon.ico is an image that stays
in the root of your server. It's a
necessary evil because even if you
don't care about it the browser will
still request it, so it's better not
to respond with a 404 Not Found. Also
since it's on the same server, cookies
are sent every time it's requested.
This image also interferes with the
download sequence, for example in IE
when you request extra components in
the onload, the favicon will be
downloaded before these extra
components.
The only problem could be that your relative link is not under the root domain, so that
HOST / YourPath /images/favicon.ico
can be found difficult.
If that would be the case then you would need to include a base href tag in your document and then this would be solved.
p.s. here is the parser i'm writing now to auto download favicons, find yourself in the flow: http://plugins.trac.wordpress.org/browser/wp-favicons/trunk/includes/class-http.php