How do I investigate a "style sheet could not be loaded" message in Firefox?
CssFirefoxCss Problem Overview
How do I investigate a "style sheet could not be loaded" message in Firefox? This message appears as a red bar below the page contents and above the developer tools. How do I find out what file the browser is referring to? I'm running version 46.0 on Linux Mint 17.3.
Update
If I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
Another Update
This error bar comes and goes, it is not consistent for a particular page.
Css Solutions
Solution 1 - Css
This may be a very specific edge case, but I had this exact same error with no indication as to which style sheet Firefox was complaining about. It turns out that it was the Ad Blocker that I was using. When I disabled the ad blocker and reloaded my page, the error went away.
Solution 2 - Css
This happens almost always when CSS is gziped, but server returns Content-Length of not compressed resource. Seen this happen when using mod_deflate with mod_fastcgi. This is server side bug, not firefox.
Solution 3 - Css
> # Update Notice:
>
> Firebug is out of date, instead of firebug you want to be using Firefox Developer Edition which has Firebug-type diagnostics and tools built in.
>
Get Firebug, or otherwise view the page source code (right click on it on Firefox and choose View Source) and click through on each .css stylesheet as referenced in the <head> section of the HTML page. One or more of these will return an Error 404 or some other error.
Each CSS sheet is in a <link> element in the Head of the HTML.
Example:
viewing the source code to this page will give a pile of code, in the <head> section is the <link>:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
...
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/Sites/stackoverflow/all.css?v=8c7d44a438e6">
...
</head>
This shows that there is a style sheet in the link element, and for your page/site if you click through all of these (there may be multiple ones) and find the one that gives you the specific error.
UPDATE:
>(Update) if I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
Therefore you should be looking in each of your CSS and related documents to see which document is linking out to an unreachable resource.
Solution 4 - Css
Another reason for style sheet could not be loaded is "active mixed content" in combination with HTTPS. I.e. if your HTML code is loaded over HTTPS, but references a CSS that is delivered over HTTP, Firefox will block the CSS file. The blocking will cause an explanatory entry in the Web console. See https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content for more information.
The blocking will also happen if the request for the CSS file is answered via HTTPS with a redirect and the redirect URL uses HTTP. And Google Chromium will also block active mixed content over HTTP and make an entry in its Javascript console.
Solution 5 - Css
I had this error from this stackexchange page, got the red line in firebug console. It pointed to the link https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=743e70f26396 so I checked the page source copy/pasted the link into a new tab and hit enter. Firefox screamed Security issue certificate error, So I just added an exception and the CSS loads. This error did not appear in Chrome or IE.
Easy fix.