So I've got a webpage which loads fine in Chrome & Firefox.
But in Safari, it only loads 2/3 of the external (linked) CSS files. The file that doesnt get loaded is my own custom CSS file.
Firstly, I've checked the HTTP response headers for that custom CSS file and they look like this:
HTTP/1.1 200 OK
Content-Type: text/css;charset=utf-8
X-Content-Type-Options: nosniff
Transfer-Encoding: chunked
Server: WEBrick/1.3.1 (Ruby/2.1.2/2014-05-08)
Date: Tue, 16 Sep 2014 08:30:46 GMT
Content-Length: 3387
Connection: Keep-Alive
Secondly, the header tag has 3 different CSS files in it.
Bootstrap (from CDN)
Google Font
Custom CSS
Here's the header tag:
<head>
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' rel='stylesheet'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Laila:700' rel='stylesheet' type='text/css'>
<link href='http://104.131.6.40:9001/assets/app.css' rel='stylesheet'>
<..snip..>
</head>
The first 2 stylesheets seem to be loading OK (because the page displays like a bootstrap page), but the third one is definitely not loaded.
The URL is:
http://104.131.6.40:9001/p/1
If you access it in Safari, you'll see what I'm talking about.
Any ideas what's going on?
Problem solved
I was using WEBrick (Ruby) server. Apparently there is a bug there that sets an incorrect Content-Length header.
https://github.com/rack/rack/issues/618
Solution is to use thin instead, now it works fine.
Related
I have a webserver since my main HTML page does not contain a webicon, (just a basic template)
"HTTP/1.1 200 OK"
Content-Type: text/html
Connection: close
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Both chrome and Mozilla will also send an additional HTTP request :
GET /favicon.ico
I would like to respond to this request by sending a PNG file, problem is the tab icon is not showing up even If I successfully return to the /favicon.ico request.
Ny response to GET /favicon.ico looks like this:
HTTP/1.1 200 OK
Content-Type: text/plain
Connection: close
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAB0CAYAAABzNJfPAAAABGdBTUEAALGP....
But the icon does not show up on the tab bar. I am getting this:
What I was expecting is for the icon to show up in the tab like this
You might say just include the icon in the main HTML. But that would be "cheating" since what I am setting out to do is to handle a /favicon.ico requests from browsers. If I do that I would just be avoiding the issue, not addressing it
Your content-type header is set to text/plain which makes the browser read it as plain text, not an image. Try setting it to image/png. Also, don't send the image as base64, just send the raw image. I'm not sure what web server you are using so I can't help you with how to send it as a raw image.
The following html is not recognised by MS Edge(Windows 10) and it downloads html as a file instead of rendering. It renders as html in Chrome and FireFox without any issues. The error is repeatable on other machines and IE 10
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
The problem is not with the file content, but with HTTP headers. You have to make sure that server sends proper Content-Type header, for example:
Content-Type: text/html; charset=iso-8859-1
Aaargh, I found the problem: The html that was downloading came from a .php file which included a PHP directive:
header('Content-Type: charset=ISO-8859-1');
This was overriding the content-type setting in default header html which was then downloaded as text as displayed in my original question above. This then made me think it was a MS Edge issue when in reality FireFox and Chrome must assume HTML as default content-type but Edge clearly does not. Anyhow, this change in php directive fixed the issue:
header('Content-Type: text/html; charset=ISO-8859-1');
i have added my css files that are bundled like this
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/themes/vendors/css")
<link href="~/Content/themes/base/fonts/fonts.css" type="text/css" rel="stylesheet" />
and in firefox , chrome i see these 3 files requested twice
first request with header
Accept text/css,*/*;q=0.1
Second request with header
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
this is same for all 3 files and i don't know who requested second file with different headers
can some one help me how can i fix it.?? any help will be appreciated
Something strange seems to be happening with IE on Windows Embedded CE 6.0 that I can't explain. I have tag in my page something like this:
<LINK href="~/getStyleSheet.aspx" type="text/css" rel="stylesheet" />
When I open this page on the device the page looks totally wrong (like it doesn't have any styling). After some fiddling around I changed it to be:
<LINK href="~/getStyleSheet.css" type="text/css" rel="stylesheet" />
And just created a static .css file with the appropriate contents. That made it worked.
So it seems that IE is ignoring styling if it doesn't come from a file with a .css extension. Any one have any thoughts on this? Is this by design? Is there a way around this?
Thanks for any help in advance!
It looks like it is related to HTTP headers. I narrowed it down to the Cache-Control header. When it is Cache-Control: no-cache the CSS doesn't get applied. If it is Cache-Control: private then the CSS does get applied.
I'm confused.
If I point by browser (Chrome or Safari on OSX) to this web site, it shows all the SVG perfectly:
http://emacsformacosx.com/
Now, if I view source on that page, copy it, and paste it into a new HTML document on my desktop, then view that with either browser, I get no SVG at all.
Why the difference?
Why does SVG work on the web site, but not in the local HTML file?
Thanks!
You renamed it to HTML, and the browser assumes html content.. while the page is text/xml ..
if you rename it to .xml and open it, you will see it just fine..
The HTTP response header information causes the browser to interpret the information as XML:
HTTP/1.1 200 OK
Date: Sun, 21 Feb 2010 02:32:02 GMT
Server: Apache/2.2.14 (Debian)
Vary: Accept-Encoding
Transfer-Encoding: chunked
Content-Type: text/xml; charset=UTF-8
You see, the server that served up the page was smart enough to detect that this was an XML document, and told the browser. When you load the file from disk, your browser may not be smart enough to do this, and tend to rely on the file's extension to supply this information.
You could try inserting the following into the <head> element:
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
You see what I did there? It's just a mirror of the HTTP response header that would have specified the document type and encoding.
The purpose of this tag is to make browsers think, "Hey, the server is telling me that this document is HTML, but the document is telling me it's XML. The document probably knows better than the server, so I'll trust it... ::interprets as XML::"