This is more out of curiosity than anything, but is it possible to save a stylesheet on Pastebin and load it in an HTML document? I tried to do it the way you'd normally link a stylesheet, but it didn't work. Here's the test code I used:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"
href="http://pastebin.com/0dY5eBga" />
</head>
<body>
<p>This is a test. Will it work? Probably not.</p>
</body>
</html>
The code I'm trying to use is saved at http://pastebin.com/0dY5eBga.
You cannot import stylesheets from pastebin in this way, even using the raw url, because the pastebin server sets a Content-Type header of text/plain on the HTTP response. This will prevent the file from being properly interpreted as a CSS stylesheet.
For instance, Chrome will give the following error:
Resource interpreted as Script but transferred with MIME type text/plain
And then it will refuse to apply your styles.
Please see the following MDN articles for details about incorrect MIME types on CSS files - many browsers block resources with incorrect MIME types:
Incorrect MIME Type for CSS Files
Configuring Server MIME Types
Here is a live example of CSS not working when linked from Pastebin, because the server does not send it with the text/css MIME type:
<link href="http://pastebin.com/raw.php?i=0dY5eBga" rel="stylesheet"/>
<p>This text is not red.</p>
Related
I have read numerous questions with a similar trouble but they usually were caused by a server misconfiguration. I use unpkg.com service so I assume it is configured correctly.
My HTML5 static page contains:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css">
My app is written in Vue but that code is still present in generated file.
Chrome shows the following warnings:
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/bootstrap/dist/css/bootstrap.min.css".
Here is the response caught by Network tab in Developer tools. Content type is text/plain
And the second redirected request with text/css:
When I enter this URL in Chrome location bar, I receive 302 status code first having the text/plain mime type first and the second fetch is expected text/css.
Is this sort of Chrome bug that it complains about the content type of request to be redirected? Or is it unpkg.com error? Is there a way to get rid off these errors (I can bundle the file in my Vue app but I want to minimize the transfers).
You can try it live here: https://beta.mezinamiridici.cz/ankety/jizda-v-tesnem-zavesu-za-kamionem
I'm building a personal website, and I got an error in chrome that reads:
"Refused to apply style from 'http://localhost:3000/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
But everything seems to be linked just fine. I'm using Express, EJS, and Bootrap. I have this line in my Express:
app.use(express.static(__dirname + "/public/"));
And I linked my style sheelt like normal:
link rel="stylesheet" href="styles.css" type="text/css"
I don't know what could be causing this issue. I don't have anything inside of the actual css file, and it is in the main directory with everything else.
I think the css file is not found on your server so when your server searches for the css file and it doesn't finds it.It returns back with html MIME type.
You can also import your css file in App.js component
import './css/styles.css';
Or Just change 'href' to 'src'.
<link rel="stylesheet" href="./css/styles.css">
to this:
<link rel="stylesheet" src="./css/styles.css">
I have a website running perfectly fine on Chrome, Firefox, Safari etc. however, the CSS does not load in Internet explorer (any version) as well as in MS Edge browser.
The Console shows this infamous error related to MIME Type:
SEC7113: CSS was ignored due to mime type mismatch
File: application-2015-2a0565839ee60a029c49fc918e3625e9.css
SEC7113: CSS was ignored due to mime type mismatch
File: CustomCss.css
SEC7113: CSS was ignored due to mime type mismatch
File: print.css
I have checked in the code, and this is how it is in the <head>
// ASP.NET MVC code - .cshtml layout file
<link href='#Url.Content("/Content/application-2015-2a0565839ee60a029c49fc918e3625e9.css")' media="screen" rel="stylesheet" type="text/css"/>
<link href='#Url.Content("/Content/CustomCss.css")' media="screen" rel="stylesheet" type="text/css"/>
<link href='#Url.Content("/Content/2015/print.css")' media="print" rel="stylesheet" type="text/css"/>
I have checked in the IE Developer Tools, and the css indeed returned with incorrect MIME type (coming as blank) in IE instead of stylesheet or text/css as in Chrome or Firefox:
IE:
Chrome:
I have checked in IIS, the mime type for .css is mapped as expected:
How can I make IE to understand the Mime type and let it load it correctly.
Any help is highly appreciated.
EDIT
As suggested, also checked the Registry value for .css in HKEY_CLASSES_ROOT and this seems ok as below:
Also, ensured that no program is associated with CSS to open.
This is because under default settings, “static content” is not installed with IIS.
To enable this on a Windows Server 2008 machine do the following
Fire up Server Manager
Select Web Server under Roles – notice that Static Content is not installed
Select Add Role Services from the right hand menu
Check Static content and install
i think it works for you
It turns out that there was an HTTP Module which was the root cause of it as it turns out to be a known issue with ASP.NET, IIS and HTTP Module aas mentioned here:
ASP.NET CSS file not loaded when adding HttpModule to web.config
Following this and handling in Http Module explicitly for css, fixed this issue.
Thanks for everyone for taking time out and providing your expert comments
Looks like you've tried everything that seems to have worked for others.
Try setting the output to the mime type through the ASP.NET framework:
Response.ContentType = "text/css";
Have you tested using a load function?
Response.ContentType = "text/css"
Response.AddHeader("Header")
Response.WriteFile("CSS File.css")
Response.End()
Response.Clear()
You should check these things because if IE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or
type="text/css" instead of type="css/stylesheet" when importing the stylesheet.
I am trying to include flexslider in my Angular App and getting a following error after i included the flexslider css file
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/controlpanel/users/css/style.css".
I checked to see if my file location was not correct but it is correct
Your web server is not serving the resource using the correct Content-Type in the HTTP header. Your web server should have a setting for MIME types by file extensions, but that depends what server you are using.
I've faced the same issue. Well, I was just trying to use a servlet to load welcome jsp page, which contains a .css file in header.
<head>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
And I got the same error "Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/webapp/css/style.css"
When I used developer tools in chrome, under 'Network' tab, two calls were made when hit my webapp's landing url "http://localhost:8080/webapp/"
I changed my default servlet url from "/" to "/index" in web.xml
<servlet-mapping>
<servlet-name>NextServlet</servlet-name>
<url-pattern>/index</url-pattern>
</servlet-mapping>
And then added "./" to href,
<head>
<link rel="stylesheet" type="text/css" href="./css/base.css">
</head>
It worked.
I was trying to host my css files on an cloud storage service but when I linked it to my website it was not executed,
so i created an small css which just changes background but yet it doesn't works.
It seems there is some problem with its server will you please tell me what could be the problem and how to use it as css
link of css file http://copy.com/Kgs8EaMF71Qa7zqo/style.css
HTML Code
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
https://developer.mozilla.org/en/docs/Incorrect_MIME_Type_for_CSS_Files
At least Gecko has a security feature for this: All stylesheets not from the same origin must be served with text/css.
In fact, you're file is served as text/plain, so the rules in it are ignored.
Due to security reasons MIME type of files hosted on copy.com is served as text/plain
So an normal link like of CSS file from copy.com will not work.
But if you still want to host your css files on this cloud storage service you can by adding ?download=1 after your link so you html should be like
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css?download=1" rel="stylesheet" type="text/css" />
there are several other cloud service like Dropbox,Google Drive where you can host your external CSS files.
I think, it may be due to MIME type, you uploaded assuming it will work as css file but its actual MIME type will be plain type text/plain but required MIME type to make it work as css file is text/css
So It Wont work.
This file worked perfectly for me.
here is the html code with the output.
<html>
<head>
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>