css was not loaded because its MIME type, "text/html", is not "text/css" - stylesheet

I got this error while working with web app.
This is my master page
<head runat="server">
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
This is the error:
Error: The stylesheet http://localhost:55381/Login.aspx?ReturnUrl=%2fStyles%2fSite.css was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://localhost:55381/Login.aspx
Line: 0


Looks like your code is requiring a login to access the CSS stylesheet, and returning a HTML login page instead of the CSS.
To verify, try pasting the URL to the stylesheet into your browser, for instance http://localhost:55381/Styles/Site.css - if you get a login page instead of CSS, that's what you need to fix.


Try this:
<location path="~/Styles">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
Where Styles is the folder that contains style sheet. I solved it this way


#DavidPrecious gave a great answer that led me to the solution.
In my case, the local computer's Users group needed to be given Read permissions to the c:\Inetpub folder in order to allow the static content to be delivered properly.


This is more likely an issue at your server side. You request style sheet page Styles/Site.css from the server of type text/css, but your server might be responding to this request with test/html. I had this issue when my server was running in Python and my server was replying to requested css files with header text/html (as that of my index.html file). I re-arranged my server code and assigned the correct headers to its corresponding pages and my issue got resolved.


Another possibility: you've modified your .htaccess file to serve css as html. Maybe something like this, for example:
<filesMatch "\.(htm|html|css|js)$">
ForceType 'text/html; charset=UTF-8'
</filesMatch>
You will want to remove the css from the first line if you've done this.


For me it was an nginx configuration problem, in the file where you declare the path to your static content. I had to move /etc/nginx/mime.types out of the http{} block and further down into where I was serving the static content from. It could similarly be an apache or IIS problem as well, depending on your technology stack.
location / {
include /etc/nginx/mime.types;
root /path/to/static/content;
try_files $uri /index.html = 404;
}

Related

How can I get my Hostinger shared hosting server to execute .htaccess file in hidden /.well-known folder?

I am on a Hostinger shared plan, trying to set a CORS header on a single TOML file that MUST reside in the public_html/.well-known folder. I have an .htaccess file in the ".well-known" folder but the Apache server will not process it.
However, if I rename the ".well-known" folder to "well-known" (just removing the period), the .htaccess file works and I can set whatever headers I want for files in that folder.
At this point I have deleted my entire site and replaced it with an extremely simple one in order to try and make this work.
The current file structure is as follows:
public_html
/.well-known
.htaccess
test.toml
/well-known
.htaccess
test.toml
index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Apache Header Test</title>
</head>
<body>
Apache Header Test
</body>
</html>
.htaccess (identical in the ".well-known" and "well-known" folders)
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
test.toml (identical in the ".well-known" and "well-known" folders)
Apache Header Test
When I navigate to /well-known/test.toml, the response is served with the CORS header set and a content-type of "text-plain", and the toml file contents show as plain text in Chrome, which is the desired and expected behavior for both folders.
However when I navigate to /.well-known/test.toml (with the period), there is no CORS header, it shows a content-type of "application/octet-stream", and the toml file downloads instead of showing in the browser.
What exactly is happening here and how can I fix it? Thank you!

After finally asking the right question to Hostinger (thank you MrWhite!), they confirmed that making changes to the /.well-known folder is not possible on a shared hosting plan. Here is the official response I received:
The .well-known directory is server-default, so that is why overriding and making changes to it is not possible on a shared hosting plan, as important data/information is stored there.
To make meaningful changes in this directory, you would need root access, which is only available on our VPS plans.

font awesome icon is not appearing in IE 11, but showing in other browsers

I am new to font-awesome icons. I have one page in which there is a filter where user can search the data. I have added font awesome icon just before the search link (as per below screenshot), I can see this icon in all the browsers except IE 11. The funny thing is I have this icon in other pages also and I can see it in IE 11, but I cannot see this icon on this (as per below screenshot) page only.
Here is the screenshot from IE 11:
Here is the screenshot from chrome:
Can anyone help me out on this?

I had the same issue, I solved it by adding this meta tag as the FIRST tag in <head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Also, according to the official documentation, check the following:
For Internet Explorer: you don't serve files with no-store option in Cache-control header (Ref: #6454);
For Internet Explorer and HTTPS: you don't serve files with no-cache option in Pragma header.

IE has an issue with #font-faces being delivered with the HTTP-Header Pragma=no-cache. You can see it recorded on the issue tracker here
Unfortunately the issue is marked as not resolvable but there are some workarounds. The one that worked for me was using a servlet filter that avoids the Pragma header being set.
Other solutions that not worked for me:
Font-awesome disappears after refresh for all ie browsers ie11,ie10,ie9
Font awesome icons becomes invisible in IE after refresh

From IE console try to run following script
$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css" />');
If it work then try to import it CDN instead of storing it locally.

Alternatively, it might be your Internet Explorer settings that prevent the browser from downloading fonts. This was the case on one of our tightly secured servers.
Try these steps:
Open Internet Explorer
Go to Internet Options
Under Security tab, click on Custom Level...
Scroll down to Downloads and make sure the Font Download is Enabled

If you are using Spring MVC with Spring Security, Spring Security automatically adds no cache headers and so causes font-awesome to break on IE11.
(https://docs.spring.io/spring-security/site/docs/current/reference/html/headers.html#headers-cache-control)
I solved the issue by adding a ResourceHandler in my WebMvcConfiguration for font-awesome configured to allow the browser to cache the fonts.
public class WebMvcConfiguration extends WebMvcConfigurerAdapter
{
#Override
public void addResourceHandlers( ResourceHandlerRegistry registry )
{
registry.addResourceHandler("/assets/vendor/font-awesome/fonts/**")
.addResourceLocations("/assets/vendor/font-awesome/fonts/")
.setCachePeriod(31556926);
}
}

I faced the same Issue and I just added the following Link in the Tag and it worked.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Hope this helps!

If apache server is serving Font files, addthe following entries to the httpd.conf or .htaccess in .
To set right mime-types for font files, add this lines to config:
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
To update font files headers, This fix perfectly worked to render Font Icons in IE Browsers.
<LocationMatch "\.(eot|otf|woff|ttf)$">
Header unset Cache-Control
Header unset no-store
</LocationMatch >

This fixed my font-icons in IIS: Add a web.config to your font directory with these contents:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Pragma" value="none" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

I had the same issue with font awesome. I added a custom httpmodule in my .net application.
public class MyHttpModule : IHttpModule
{
public void Dispose()
{
}
public void Init(HttpApplication context)
{
context.EndRequest += new EventHandler(Context_EndRequest);
}
protected void Context_EndRequest(object sender, EventArgs e)
{
HttpResponse response = HttpContext.Current.Response;
if (string.Compare(HttpContext.Current.Request.Browser.Browser, "InternetExplorer", StringComparison.InvariantCultureIgnoreCase) == 0)
{
response.Headers.Set("Pragma", "none");
}
}
}
And registered the module in web.config.
<system.webserver>
<modules>
<add type="MyHttpModule, Culture=neutral" name="MyHttpModule"/>
</modules>
</system.webserver>
It solved the issue.

I had the same issue with Font Awesome 4.7 and IE 11. I fixed it by adding the following meta info in the <head> section:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

We recently had this issue serving Font Awesome font files from our Rails application. The confusion was that we weren't passing Pragma or Cache-control response headers - so the previous answers in this post were a bit confusing.
To summarize - this issue is caused by these two conditions:
The request is being initiated from font-face, over an HTTPS connection (critical for re-producing this bug locally).
The Pragma header has the value no-cache OR in our case, we're serving everything gzipped, and the Vary header is passed with a value other than Accept-Encoding.
We fixed this by adding the following to our Rack::CORS config:
config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
# Setting Vary to Accept-Encoding required or IE11 fonts will not load from local cache
resource('*.eot',
headers: :any,
credentials: false,
methods: [:get],
vary: ['Accept-Encoding'])
end
end

I faced the same issue. My technology stack is Spring boot 2.0 and Angular 8.
This issue occurs only when you try to refresh the page over HTTPS on IE 11.
The problem is, the browser (IE 11) expects Cache-Control max-age. You need to set this header for static resources.
To resolve this issue set the following property in application.property file.
spring.resources.cache.cachecontrol.max-age=14400

In my case, it was corrupted .eot font file. I had generated new one ( + new .css styles) and it fixed the problem. Try it.

I've encountered the same issue, searched everywhere and no luck. It appears it was due to Microsoft cumulative Security update which stopped loading Fonts/Images especially :
https://support.microsoft.com/en-us/help/4486474/cumulative-security-update-for-internet-explorer-february-12-2019
https://support.microsoft.com/en-us/help/4491113/cumulative-update-for-internet-explorer-february-19-2019
To fix it you need to install the March patch:
https://support.microsoft.com/en-us/help/4489873/cumulative-security-update-for-internet-explorer-march-12-2019

For internet explorer 11, you can change your CSS like that :
nb-icon.menu-icon {
visibility: hidden;
}
nb-icon.menu-icon::before{
visibility: visible;
}

either of 2 solutions worked for me
Check whether all the below mentioned
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
And I deleted the version parameter, eg. ?v4.7.0 in every src of the font in the CSS and it is now working in my IE 11.

Redict Apache Directory Index

I've got an Apache server, and I'd like to set it up such that when a directory is requested that does not have an index.html file (and thus, Apache would, by default, generate a directory listing), Apache instead redirects (ideally using HTTP code 303) to a given url.
Unless absolutely necessary, I'd like to stay away from going outside Apache (for example, by having Apache load a php script which writes the headers manually). This is an otherwise static site, and I'd like to avoid having to introduce scripting languages into the mix.
Also, note that this post doesn't solve my problem since all of the proposed solutions use external scripts.

So I figured out that by using a combination of HTML meta refreshing and JavaScript redirection, I could cover almost all browsers in use and still have a static file. So what I did was this. In the apache site config, I put a directive that told apache to first look for index.html files, and if that failed, use a site-wide /no-index.html:
<Directory /path/to/web/root>
DirectoryIndex index.html /no-index.html
</Directory>
no-index.html, then, contained the following:
<html>
<head>
<meta http-equiv="refresh" content="0; url=/">
<script type="text/javascript">
window.location = "/";
</script>
</head>
</html>
(in this example it redirects to the web root, /, but you could replace that with whatever url you wanted)
See here for an explanation of what the <meta> tag is doing.

What HTTP header indicates when Index.html has been served?

Excuse the awkward title: I'm building a simple web server (don't ask...) and have this problem:
The browser requests mydomain.com/MyFolder
My server spots this is a folder, so instead, delivers mydomain.com/MyFolder/index.html
All fine so far, except that index.html has link to mycss.css, but the browser requests it as a top-level file mydomain.com/mycss.css instead of mydomain.com/myFolder/mycss.css.
Is there some HTTP header that needs setting up to indicate that a different page has been served? I've tried returning Content-Location: /myFolder/index.html, but without any visible success.
index.html basically contains this:
<link rel="stylesheet" href="mycss.css" />

Return a 301 Moved Permanently status code, instead of the 200.
Provide a Location header pointing to the same url plus a slash in the end /
Like so:
Location: mydomain.com/MyFolder/
Do not serve the index.html file on that same request, wait for the browser to request again with the slash at the end.

Or just try to add something like this to your .htaccess file:
RewriteEngine On
RewriteBase /
RewriteRule ^(.+)$ myFolder/$1

Can you just try to change this:
<link rel="stylesheet" href="mycss.css" />
to this:
<link rel="stylesheet" href="/myFolder/mycss.css" />
?

Ok, actually the information given was not correct so I'm modifying the answer. If you are implementing a web-server, you must follow the standard specification. The definition <link rel="stylesheet" href="mycss.css" /> shall retrieve the the CSS file from the same location as the file in which it is defined in (index.html) is. When using relative paths, it is not the browser that requests from a specific location but the web-server should determine the location from which to serve the resource.
Check section 2.4.6 and 3 in the standards document: http://www.ietf.org/rfc/rfc1808.txt
In other words, if the path of a resource does not start with the slash (/), it is considered as relative and should be located relative to the base URL.

Favicon for all the pages in my website

I've learned that the way to add favicon for a web page is to have the following lines in the page.
<link rel="SHORTCUT ICON" type="image/x-icon" href="http://mysite.com/faviconfilename.ico"/>
<link rel="icon" type="image/x-icon" href="http://mysite.com/faviconfilename.ico" />
Should i add this code in each and every page my site has?? I use Apache - tomcat clustering to serve pages. Is there any other easy way to do this?

It is usually enough to place a file called "favicon.ico" in the root of your website.

You can get rid of the unnecessary processing and traffic as well as the error log entries by using the following Apache configuration incantations:
# Don't bother looking for favicon.ico
Redirect 404 /favicon.ico
# Send custom text instead of sending the custom error page
<Location /favicon.ico>
ErrorDocument 404 "No favicon"
</Location>

Modify the apache config.
upload this file to the root directory of your website. Make sure that it is readable so that apache can read it. If you have shell access, type: "chmod +r favicon.ico".
Then edit httpd.conf and insert the following line:
"AddType image/x-icon .ico"
Your approach works when you don't have access to your apache config. In this case, if you are using any framework then you should add it to your layout/template.

Here is my method for php sites. It ensures that if you update the favicon, it will be updated immediatly when your clients visit your site:
<link rel="shortcut icon" href="favicon.ico?v=<?php echo time() ?>" />