CSS not loading because MIME type coming as "text/html" only in Internet Explorer

Question

I am having the .NET MVC application running on IIS 7. My page is rendering properly and styles are working fine in Chrome and Firefox but in IE 10 the css is not loading and in Network tab I am seeing it is coming as "text/html" and giving 406 Http Unacceptable code. My css file path is correct and I am rendering like below

<link href="/Content/css-app/bootstrap.min.css?v=20210924122520" rel="stylesheet" type="text/css" />

Can somebody please help? I have been searching through the internet from more than 2 days.

You've to add headers https://airbrake.io/blog/http-errors/406-not-acceptable — Viira, Sep 24 '21 at 07:24
Accept: Header from browser is "text/css" but somehow for IE 10 the data from sent from server is "text/html" — Aishwary Rastogi, Sep 24 '21 at 07:30
Have you tried adding `request.AddHeader("Accept", "text/html");` — Viira, Sep 24 '21 at 07:33

score 0 · Answer 1 · answered Sep 24 '21 at 07:53

From what I have found you can configure mime types in IIS, if that is possible for you:

web.config

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".css" mimeType="text/css" />
      <mimeMap fileExtension=".js" mimeType="text/javascript" />
    </staticContent>
  </system.webServer>
</configuration>

You may also want to add the charset (apply the correct one for you if it's not utf-8):

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".css" mimeType="text/css; charset=utf-8" />
      <mimeMap fileExtension=".js" mimeType="text/javascript; charset=utf-8" />
    </staticContent>
  </system.webServer>
</configuration>

If it's not that maybe the response is really an HTML page with an error text?
It might be an HTML page in disguise.

Credits:

They are properly added in web.config. No issues there. And the site is working properly with Chrome and Mozilla. — Aishwary Rastogi, Sep 24 '21 at 07:56
Okay needed to address the obvious anyway. Chrome and Mozilla are known to be more dev friendly, so no wonder it's IE acting up. Have you read the text of those error responses? `406` means something is missing. You absolutely need to support IE10? — Peter Krebs, Sep 24 '21 at 07:58

score 0 · Answer 2 · answered Sep 24 '21 at 08:06

You probably did not add the appropriate mime type on the server side and the browser is sending it with "text/css".

You can always get the content in plain text and put it in a style tag.

var xhtp = new XMLHttpRequest();
xhtp.open("GET","/Content/css-app/bootstrap.min.css?v=20210924122520");
xhtp.setRequestHeader("Content-Type","text/plain");
xhtp.onload = function(){
    let stylTag = document.createElement("style");
    stylTag.textContent = this.responseText;
    document.head.appendChild(stylTag);
};
xhtp.send();

CSS not loading because MIME type coming as "text/html" only in Internet Explorer

2 Answers2