The Error I get on my website in IE console is
SEC7113: CSS was ignored due to mime type mismatch
Seems the CSS is not getting loaded at all.
I have researched a lot.There are quite a few questions on this around the web, but there is no conclusive fix.
Microsoft official site says to add type="text/css" attribute to the link tag, but in my case, I have already added it, in vain.
Is there any fix to this?
You need to set the Content-Type http header to text/css. With htaccess:
AddType text/css css
Related
I was running own website on localhost, with the server showing everything correct, Chrome gives me some errors:
Refused to apply style from 'http://example.com' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Is there any way to skip it or disable it?
You don't have to disable MIME checking. See an explanation.
The problem is probably, that your stylesheet file is not accessible with the URL you defined in the link element. Maybe just a typing error. Try to click on the link in the error message and see if it can be loaded.
Check your stylesheet references in your code
<link rel="stylesheet" type="text/css" href="/styles/styles.css" />
In my web application I have some files with extension ".css.map".
Looking on the internet I see that, as content type, I should put "application/json" so my include directive looks like this:
<link rel="stylesheet" type="application/json" href="resources/css/angular-chart.css.map"/>
Nevertheless, this does not prevent my browser to display the warning:
Resource interpreted as Stylesheet but transferred with MIME type text/html
This warning seems to be the cause of a blank page displayed on internet explorer browser (chrome and firefox seem to be fine). After reloading the page IE does display it right, but I'd like to solve this problem at its root, by getting rid of that warning.
I think the problem is in the
rel="stylesheet"
so, what should I put there?
You shouldn't link to map files at all. Tools that use them will use a X-SourceMap header or infer the URL by adding .map to the URL of the actual stylesheet or JavaScript program.
Try explicitly specifying the type as json in your link tag, like so:
<link rel="stylesheet" type="application/json" href="blah">
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
TL;DR
I've read through many questions on Stack Overflow on this issue and I've tried to follow the given advice. Still, my CSS stylesheet will not work in Chrome/Safari but it can work in Internet Explorer.
The only odd thing that I can see about my scenario is my server is returning all files as of type application/octet-stream. I cannot change this aspect of the server. Is there something I can do to interpret my CSS file as a stylesheet in Chrome/Safari and IE?
I have an embedded web server project that I am working on. I have very limited control of the server software and the ability to make page-level settings. All I can do is create static HTML, CSS, and image files that are compiled into the server application.
As such, all files that are returned from the embedded server are declared as application/octet-stream in the HTTP header. This produces warnings in Chrome but no errors.
Initially, I had a problem loading this style sheet in Chrome/Safari but it would work in IE. After reading through a couple questions on Stack Overflow, I found that I needed to change my stylesheet declaration from:
<link rel="stylesheet" href="/styles/index.css">
to:
<link rel="stylesheet" type="text/css" href="/styles/index.css">
When I made this change Chrome & Safari still failed to process the CSS file but IE also started to ignore the stylesheet.
Oddly, if I do not declare a DOCTYPE on my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution.
My guess is this issue has something to do with the HTTP header declaration and that it doesn't match the type declared in the link element.
What can I do to get this stylesheet to work in Chrome, Safari, and IE while following good web development codes-of-practice (i.e. using doctypes on my HTML files and not embedding the style code in the HTML headers?)
For clarity sake, the relevant CSS/HTML code is shown below.
index.css
html {height:100%}
body {margin:0;min-height:100%;position:relative}
iframe {width:100%;height:100%;border:none}
.hdr {min-width:765px;overflow:auto}
.logo1 {float:left;margin:4px}
.logo2 {float:right;margin:4px}
.menu {position:absolute;top:70px;left:0px;bottom:0px;width:175px}
.content {position:absolute;top:70px;left:175px;bottom:0px;right:0px;}
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that this would at least work in IE9 //-->
</head>
<body lang="en-us">
<div class="hdr"><img class="logo1" src="/images/logo1.png" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>
FYI, this is a new project that is being developed from an existing one. The original project did not declare a DOCTYPE on the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the index.htm originally consisted of multiple frames within a frameset.
I am trying to update this application, using correct, and up to date methods for developing web pages. I can make this application work, but I feel that this would be at a sacrifice of future-browser compatibility if I have to rely on browser quirks mode and framesets.
I have tried to close the link tag but that doesn't help. Technically, this shouldn't be an issue since this document is declared as an HTML5 document, rather than XHTML.
It's certainly due to the application/octet-stream content type. I can re-create the issue on my end. Soon as the content type is set to text/css your HTML/CSS load fine.
As a workaround you can use <style> tags for you CSS if you can't get the server to send the correct content type.
I hate to have to answer my own question this way but the problem was most certainly with the fact that the server was returning a content type of application/octet-stream within the HTTP header.
After discussing the issue with management we had to update the code associated with the HTTP processor. This is code that is part of a third-party RTOS and we have been extremely hesitant to making any changes to this code.
However, in this case the need has out-weighed that desire. I've integrated the necessary changes to fix the HTTP header to return a content type of "text/css" for cascading style sheets. All is now right with the world.
I think I'll just chime in here. Not to answer the question, but to confirm the issue and perhaps help people with similar problems.
I had the same problem: an external css file was loaded alright, but it was not applied in Chrome. (Safari and FF were ok about it). So, same problem, slightly different cause.
It turned out that because of a bug in the webserver code the HTTP response contained two Content Types, 'text/html' and 'text/css'.
The solution was to remove the faulty 'text/html' line. It seems Chrome is pickier than other browsers about response headers. Which I suppose is legitimate, but a warning would have been nice.
btw, you can see all the http information for a loaded resource in Chrome, when you open Developer Tools, and select Network. Then click on the file that you want to investigate. (it took me a while to find that)
We had a problems with an iframe wich it's contents was updated by an external javascript routine, the CSS were loaded but were not applied. But updating the body HTML from a routine present in the iframe head worked as suposed to.
This same behaviour was not present in gecko and explorer, but happened the same at Safari browser (webkit)
Hope this could give some light in this curious case.
I would like to add one bit of information that may save some of you some time. It appeared that chrome was not recognizing my CSS either. After reading the above post I reviewed the files in the Developer Tools->Network. Turns out that Chrome was using a locally cached version of my CSS. As soon as I refreshed as opposed to accessing the URL again, it worked!
I'm no expert, but i've made this mistake before, it's rather simple.
You've written:
<link rel="stylesheet" href="/styles/index.css">
If this is a folder in the same directory as your index.html file, then you need to remove the first /. like so:
<link rel="stylesheet" href="styles/index.css">
EDIT: I think someone else mentioned this already, but it may have been overlooked.
Let's assume that I want to add a favicon on a dynamically generated page (specifically an ADF Faces page, but this is irrelevant). I can't modify a tag of my resulted html.
So I try to add a http-header in servlet header. I want my header to be identical to html head element:
<link rel="shortcut icon" href="http://foo.com/favicon.ico">
I'm adding it this way:
httpResponse.addHeader("Link", "<http://foo.com/favicon.ico>; rel=\"shortcut icon\"");
And in my browser I see this header in response:
Link: <http://foo.com/favicon.ico>; rel="shortcut icon"
But, unfortunately, this does not have any effect in IE or Chrome. Anyone tried to achieve the same thing? Am I doing something wrong? Is that should work at all?
And the answer is: this method relies on proposed standard (a draft) that is not implemented yet (thanks to Salman A for pointing this out).
Though it would be great if it worked.
Yes Link headers have been a defined standard in RFC 5988 since October 2010 but the only link relation I've seen working are for stylesheet and only in some browsers at that.
Also see: HTTP Header Stylesheets
What #dragn is suggesting is perfectly viable, and in spec why the browsers aren't adopting is beyond me. There are some other useful relations like prefetch, bookmark and glossary to name a few. The least they could do is notify the user that links exist and provide it as a drop down or menu. Maybe a plugin is what is called for to show the browser vendors what we want it to do as it seems they are all confused. Any suggestions?
For now I guess we have to wait till 2020 for this feature to become available which seems to be the trent.
Yeah yeah "draft"..
anyway..
If you want to see how you can use it in-Practice, here is an example (taken from icompile.eladkarako.com)
<ifModule mod_headers.c>
Header set Link <http://icompile.eladkarako.com/favicon.ico>; REL="shortcut icon"; TYPE="image/x-icon"
Header set Link <http://icompile.eladkarako.com/favicon.ico>; REL="icon"; TYPE="image/x-icon"
Header set Link <http://icompile.eladkarako.com/img/apple-touch-icon.png>; REL="apple-touch-icon"; TYPE="image/png"; sizes="316x316"
</ifModule>
It will work in current Chromium/Google Chrome/Google Canary,
(and for sure if you set the switch for advance web-features in chrome://flags)