48

Here is the head of my .html file:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="http://fakedomain.com/smilemachine/html.css" rel="stylesheet"/>
<title>Common Questions</title>
<script language="javascript">

function show(name) {
  document.getElementById(name).style.display = 'block';
}
</script>
</head>

And my html.css file is indeed where it should be. But I'm getting absolutely no styling whatsoever.


Okay, so now I'm just trying to fix the problem locally on my machine. Here is the head:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="cover.css" rel="stylesheet" type="text/css"/>
<title>Common Questions</title>
<script language="javascript">
function show(name) {
  document.getElementById(name).style.display = 'block';
}
</script>
</head>

and now the css:

BODY {
    font-size: 18pt; 
    color:#000fff;  
    font-family: Helvetica; 
    margin: 0 9 9 9;
}

table {
    font-size: 8pt; 
    color:#525252;  
    font-family: Helvetica; 
    margin: 0px;
    border-collapse: separate;
}

th {
    font-size: 10pt; 
    text-align: left;
    color:#550055;  
    font-family: Helvetica; 
    border-color: #999;
    border-width: 0 0 1px 0;
    border-style: dotted;
}

td {
    font-size: 10pt; 
    text-align: left;
    color:#550055;  
    font-family: Helvetica; 
    border-color: #999;
    border-width: 0 0 1px 0;
    border-style: dotted;
}

.left {
    display:inline-block;
    font-size: 10pt; 
    color:#990055;  
    font-family: Helvetica; 
    margin: 0 0 5 0;
}

.right {
    display:inline-block;
    font-size: 18pt; 
    font-weight: bold;
    float: right;
    color:#525252;  
    font-family: Helvetica; 
    margin: 0px;
}

.question {
    display:inline-block;
    font-size: 18pt; 
    font-weight: bold;
    float: right;
    color:#B452CD;  
    font-family: Helvetica; 
    margin: 0px;
}

Okay I've made some progress. The firebug suggestion was really good. I saw that the link to the CSS file was being read as Chinese characters. This was UTF encoding problem so I just opened my files in a text editor and then saved them as UTF-16.

But now it is reading the wrong data from the css file! I have uploaded the css file below, but in firebug it is showing a two liner.

7
  • This may not help. But is there any reason why you are using a full URL for your css file? Why not just use /smilemachine/html.css?
    – LeeR
    Aug 4, 2011 at 11:51
  • 2
    I just thought an absolute url would be more of a sure thing. Like it would be guaranteed to work. Aug 4, 2011 at 11:55
  • It's rather opposite ;-) A relative URL will work in more cases.
    – Arsen7
    Aug 4, 2011 at 12:17
  • If it is a minified CSS file check whether there are any comments at the start of the minified file which is commenting out the whole content ahead? I had that problem and then I came across support.mozilla.org/bm/questions/1004201#answer-586876 doing which I found that my page and CSS encoding didn't matched. But fixing it also my styles were not getting applied. Then looking at the "Style Editor" in Web Developer Tools in Firefox I noticed the my minified stylesheet starting with /* so removing it the styles got applied. Hope this helps. May 31, 2023 at 11:31
  • This question was apparently resolved in a way unlikely to help future readers. As is clearly apparent, anyone encountering this could have any number of causes and thinks any number of fixes might help. And almost none of the answers are related to encoding problems.
    – TylerH
    Dec 15, 2023 at 15:45

12 Answers 12

31
  1. Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.

  2. (If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?

2
  • 2
    My CSS didn't work because a weird invisible character got pasted when taking code from the web. I found it by checking the CSS in the following site: jigsaw.w3.org/css-validator I just rewrote manually the code in a new file and everything worked.
    – Alexis
    Dec 25, 2020 at 17:54
  • Thank you very much, @Alexis. It showed the error: I/O Error: Unknown mime type : text/plain;charset=UTF-8. It appears both PHP function (mime_content_type) and 'file -bi' Unix command had been returning the above. Also, text/x-c++ for .js files. Temporarily hardcoded, and will try investigating further.
    – Artfaith
    Dec 22, 2021 at 0:33
12

Firefox can reject a stylesheet if it is not served with a content type of "text/css". (This is separate from the 'type="text/css"' declaration in the HTML.)

1
  • 1
    Thanks! My system was sending down css content in files with a .scss file extension. Setting the Content-Type to text/css for these files in my reverse proxy did the trick.
    – BruceJo
    Nov 29, 2021 at 21:25
9

Try:

<link type="text/css" rel="stylesheet" href="http://fakedomain.com/smilemachine/html.css" />

If that doesn't work either, then make sure the URL is accessible, and the content is what you are looking for.

5
  • @Eric Brotto: Are you sure the contents of the css file are loaded correctly, and not messed up because of some rewrite rule. Can you step in with Firebug to inspect the content of loaded CSS file? Can we see a live example of this, so we can debug hands-on the issue?
    – Shef
    Aug 4, 2011 at 13:10
  • Thanks for the effort Shef. Please see my EDIT 2. Aug 4, 2011 at 14:12
  • 1
    @Eric Brotto: There is no need to save your file as UTF-16, UTF-8 is fine and recommended. I don't see where is the problem in the provided link. In your question you are asking about an external css file, however in the provided link you have used inline css. So, what is the issue now?
    – Shef
    Aug 4, 2011 at 14:19
  • D'oh! It seems like there was a piece of javascript that was importing a separate css file (I think). Anyway, all is good now. (@Shef Thanks for pointing out the inline css :) Aug 4, 2011 at 14:25
  • 1
    Actually, ignore that bit about the javascript. I really do think everything has to do with the UTF encoding. Aug 4, 2011 at 14:51
7

Could it be that you have an error in your CSS file? A parenthesis left unclosed, a missing semicolon etc?

0
6

In my case, the problem was with the media option:

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

I solved by removing it:

<link rel="stylesheet" type="text/css" href="css/style.css"/>
0
5

I had the same problem - I changed my text encoding to UTF-16 on my index file and my css file would show up blank when I'd try to load the page in the browser. I figured out by much trial and error that your html and css files have to have the same encoding! I don't know if this would work for you but it did for me.

0
5

A stylesheet may not get loaded for several reasons. But the main approach to solve such a problem is as follows:

  1. After loading the page, press F12 to open the Developers Console. Check the console for any logged errors.

  2. Then you should check the Stylesheet tab and see the list of stylesheets the browser loaded.

  3. The URL you're using inside your HTML link tag may be inaccessible, so manually try to visit the stylesheet with a browser and see if everything renders correctly.

  4. Any typo inside your HTML or CSS stylesheet may cause the stylesheet from loading.

  5. Check for any occurrences of fatal errors before your <link> tag. A fatal error may stop the running code and suspend the page, thus not including your stylesheet.

2

Copy the css file's url and paste it into your browser. If it doesn't load the file than you know the problem is in the url.

0
2

I was able to fix this problem by following Abraar Arique's post, then I went into the console, and then I went under Style Editor and found Firefox wasn't loading the updated copy of my CSS file.

I cleared all history and reload the page then my problem was fixed.

1
  1. I had the same problem, and I used the UTF-8 coding for both of my files as follows:

    add @charset "UTF-8"; in CSS file and <meta charset="UTF-8"> under <head> tag in HTML file. and it worked for me.

    it makes the same encoding for both the files i.e HTML and CSS.

    You can also do the same for "UTF-16" encoding.

  2. If it is still not working check for the <link type="text/css" rel="stylesheet" href="style.css"/> under <head> tag in HTML File where you should mention type="text/css"

1

During my Gulp minification process

<!-- build:css /css/project-mini.css -->
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/splash.css"/>
    <link rel="stylesheet" href="css/header.css"/>
    <link rel="stylesheet" href="css/print.css" media="print"/>
<!-- endbuild -->

Last CSS file was for print and the generated output gave me

    <link rel="stylesheet" href="css/project-mini.css" media="print"/>

So because of media="print" all CSS rules were skipped !

0

If your URL is working and loads the file correctly, and you've said that adding the correct

<link rel="stylesheet" type="text/css" href="yourlink.css">

code doesn't fix it, then the only other problem is that's it's an error in the actual .css file. And to advise you on that, we'd need to see the file.

What you can do though is write one basic <div> tag into your HTML, add in a basic CSS rule into your existing file, then see if you can influence this tag with your new CSS rule.

Not the answer you're looking for? Browse other questions tagged or ask your own question.