When trying to apply a style to a specific page on a website (The exact same style works elsewhere on the webserver), I receive the following error
Refused to apply style from 'style.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I've tried running the file locally, while only importing the file into HTML and it works perfectly fine. I've also tried this on the same webserver on a blank page, and again, it works perfectly fine.
I've also replaced the file due to worries of it being the encoding of the file, and I've removed all comments from the file (As per this answer).
The entire contents of the CSS file is as follows
#Main_ctl01_lst {
width: 320px;
}
#Main_ctl02_txt{
height: 25px;
width: 200px;
}
#Main_ctl03_txt {
width: 250px;
}
.label #Main_ctl04_lbL:fter {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl05_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl06_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl07_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl08_lbl {
font-size: 0;
}
.label #Main_ctl09_lbl:before {
content: "Content";
font-family: inherit;
font-size: 9pt;
}
.label #Main_ctl010_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl110_lbl {
font-size: 0;
}
.label #Main_ctl11_lbl:before {
content: "Content";
font-family: inherit;
font-size: 9pt;
}
.label #Main_ctl13_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
/* Line 3*/
.label #Main_ctl114_lbl {
font-size: 0;
}
.label #Main_ctl115_lbl:before {
content: "*";
font-family: inherit;
font-size: 9pt;
}
/* Line 4*/
.label #Main_ctl16_lbl {
font-size: 0;
}
.label #Main_ctl17_lbl:before {
content: "Content";
font-family: inherit;
font-size: 9pt;
}
.label #Main_ctl118_lbl {
display: none;
}
.input #Main_ctl19_dp {
display: none;
}
.input1 {
visibility: hidden;
}
.input2 {
display: none;
}
.label {
display: none;
}
body {
background-image: url(https://example.com/image.png);
background-color: rgb(255,0,0);
background-color: #FF0000;
}
and the header code of the web page
<head>
<script src="/Content/jquery-1.9.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/Content/jquery-ui-1.8.14.custom.css">
<script src="/Content/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="/Content/Test.Scripts.js" type="text/javascript"></script>
<script src="/Content/Reflection.js" type="text/javascript"></script>
<script src="/Content/CollapsibleCheckBoxList.js" type="text/javascript"></script>
<script src="/Content/Scripts.jQuery.Extensions.js" type="text/javascript"></script>
<title>Test</title>
<link rel="shortcut icon" media="all" type="image/x-icon" href="/Content/favicon.ico">
<script type="text/javascript" src="/content/jquery.autotab-1.1b.js"></script>
<script type="text/javascript" src="/content/jquery.calculation.min.js"></script>
<script type="text/javascript" src="/content/jquery.format.1.05.js"></script>
<script type="text/javascript" src="/App_Templates/FrontEnd.Test/TestScript.js"></script>
<link href="/App_Templates/Common/_Reset.css" type="text/css" rel="stylesheet">
<link href="../App_Templates/FrontEnd.Test/Standard.css" type="text/css" rel="stylesheet">
<link href="../App_Templates/FrontEnd.Test/Template.css" type="text/css" rel="stylesheet">
<link href="/App_Templates/Common/Menus.css" type="text/css" rel="stylesheet">
<!--[if lte IE 8]>
<link href="../App_Templates/Common/IE8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="/WebResource.axd?d{{removed}}" type="text/css" rel="stylesheet"><link type="text/css" href="/s3?Styles.CssFile/{{culprit_file}}.css&{{removed}}" rel="stylesheet">
</head>
If the script works as intended, I expect to see a red background. As previously stated, this is the case elsewhere, but not on this specific webpage.
In reality, nothing in the file is loaded due to the MIME type issue.