2

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.

BlackLotus
  • 545
  • 3
  • 19

1 Answers1

0

This was popped on the back burner for some time (I've only just come back around to it!).

This issue was fixed in its entirety by uploading the file from a different machine. After looking through possible reasons as to why the file would not upload from the original machine, we came up blank.

We believe it may be due to an issue with new lines and carriage returns. We can't see any evidence of this though. I apologise for the lacking answer, though we're truly stumped on this one.

BlackLotus
  • 545
  • 3
  • 19