This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox (29.0.1) can see, but does not apply, an external .css stylesheet (IE can, and the stylesheet works if internal using <style>) - what is wrong?

more options
FF version: 29.0.1
O/S: Windows xp, SP3

html code: 
<head>
	<link type="text/css" rel="stylesheet" href="stylesheet.css">
...
</head>

stylesheet:
body {background-color:#F5FADC;color:black;font-family: Verdana,Arial,sans-serif;font-size:12px;padding-left:10px; padding-right:10px;}
h1 {text-align:center;font-size:30px;}
h2 {text-align:left;font-size:16px;}
/*p {font-family: Verdana,Arial,sans-serif;font-size:12px;}*/
ol.alpha {list-style-type:upper-alpha;font-weight:bold;}
ol.decimal {list-style-type:decimal;font-weight:normal;}
ul.no-bullet {list-style-type:none;}
.italic {font-style:italic;}
.bold {font-weight:bold;}
.normal {font-style:normal;font-weight:normal;list-style-type:decimal;}
.padded {padding-top:3px; padding-bottom:3px;}
ol {list-style-type:upper-alpha;font-weight:bold;}
ol li {padding-top:3px; padding-bottom:3px;}
ol li ol {list-style-type:decimal;font-weight:normal;}
ol li ol li ul {list-style-type:none;font-style:italic;font-weight:bold;}
ol li ol li ul li ul {font-style:normal;font-weight:normal;}
ol li ol li ul li ul li {padding-top:3px; padding-bottom:3px;}
<pre><nowiki>FF version: 29.0.1 O/S: Windows xp, SP3 html code: <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"> ... </head> stylesheet: body {background-color:#F5FADC;color:black;font-family: Verdana,Arial,sans-serif;font-size:12px;padding-left:10px; padding-right:10px;} h1 {text-align:center;font-size:30px;} h2 {text-align:left;font-size:16px;} /*p {font-family: Verdana,Arial,sans-serif;font-size:12px;}*/ ol.alpha {list-style-type:upper-alpha;font-weight:bold;} ol.decimal {list-style-type:decimal;font-weight:normal;} ul.no-bullet {list-style-type:none;} .italic {font-style:italic;} .bold {font-weight:bold;} .normal {font-style:normal;font-weight:normal;list-style-type:decimal;} .padded {padding-top:3px; padding-bottom:3px;} ol {list-style-type:upper-alpha;font-weight:bold;} ol li {padding-top:3px; padding-bottom:3px;} ol li ol {list-style-type:decimal;font-weight:normal;} ol li ol li ul {list-style-type:none;font-style:italic;font-weight:bold;} ol li ol li ul li ul {font-style:normal;font-weight:normal;} ol li ol li ul li ul li {padding-top:3px; padding-bottom:3px;}</nowiki></pre>

Modified by cor-el

Chosen solution

Aha, you do have a UTF-16 mismatch, but I had assumed it was the CSS file that was UTF-16 and instead it's your page. Please use the same encoding for the main page and all external CSS and JavaScript files you link into it. I don't know what encoding is best for Esperanto!

Read this answer in context 👍 1

All Replies (18)

more options

This site is not very good for code. Could you link to the page that has the problem?

If the site is not available, could you check the Web Console for style sheet warnings that might point to the problem.

With the page open in a tab, press Ctrl+Shift+k to open the web console. Then reload the page using Ctrl+Shift+r (to bypass cached files).

If the styles do not get applied, you can check two things in the web console:

(1) Content-type problem (click the underlined URL of your problem style sheet to view the Response headers and make sure it was served as text/css)

(2) Style warnings (e.g., dropped rules, especially if they are not proprietary IE or webkit properties)

more options

Very occasionally there is a problem with a UTF-16 file encoding used in a UTF-8 page. If Firefox thinks your stylesheet is in Chinese or some other unexpected character set, try re-saving it as UTF-8.

more options

Thanks for your replies.

I'm using the .html and .css files locally on my computer for development purposes. There is no 'site' as such.

I've tried your suggestions.

I've saved the css file as UTF8. That does not solve the problem.

I used the console (ctrl-shift-k, etc). FF can see the css file, but the console came up with the following warnings (screenshot attached):

file:///C:/Documents%20and%20Settings/Andrew%20Farncombe/My%20Documents/misc/languages/Esperanto/stylesheet.css Unexpected end of file while searching for ',' or '{'. Ruleset ignored due to bad selector. stylesheet.css:1 Unexpected end of file while searching for closing } of invalid rule set.

I've looked at the css code, but cannot find anything wrong. Also, the same code works in an internal <style>...</style> sheet.

Here is the css link statement in the html file:

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

Here are the css file contents:

body {background-color:#F5FADC; color:black; font-family:Verdana,Arial,sans-serif; font-size:12px; margin-left:20px; margin-right:20px;} h1 {text-align:center;font-size:30px;} h2 {text-align:left;font-size:16px;} ol.alpha {list-style-type:upper-alpha;font-weight:bold;} ol.decimal {list-style-type:decimal;font-weight:normal;} ul.no-bullet {list-style-type:none;} .bold {font-weight:bold;} .italic {font-style:italic;} .normal {font-style:normal;font-weight:normal;list-style-type:decimal;} .padded {padding-top:3px; padding-bottom:3px;} .red {color:red;} .subscript {vertical-align:sub;font-size:xx-small;} .underline {text-decoration:underline;} ol {list-style-type:upper-alpha;font-weight:bold;} ol li {padding-top:3px; padding-bottom:3px;} ol li ol {list-style-type:decimal;font-weight:normal;} ol li ol li ul {list-style-type:none;font-style:italic;font-weight:bold;} ol li ol li ul li ul {font-style:normal;font-weight:normal;} ol li ol li ul li ul li {padding-top:3px; padding-bottom:3px;}

Any ideas?

more options

Are there any extra characters at the beginning of the CSS file that you didn't show in your reply?

Could you test the file by uploading it to this validation site: http://jigsaw.w3.org/css-validator/#validate_by_upload

more options

I used the css validation site you suggested (http://jigsaw.w3.org/css-validator/#validate_by_upload).

Attached is the resulting screenshot.

Question: could it to be with any FF security settings?

more options

Try to open the Inspector (Firefox/Tools > Web Developer) and check the Style Editor tab to see if that shows the CSS file. Making changes in the style editor are reflected immediately in the appearance of the document.

more options

I've done what you suggest (ie Firefox/Tools > Web Developer).

See attached screenshot.

FF can see the stylesheet, but refuses to process it, saying that there are '0 rules'. When the same stylesheet is inline: <style>..</style>, it can see all 19 rules and processes it fine.

Again, could it to be with any FF security settings?

more options

Firefox has security restrictions on navigation to local parent and sibling folders. But since your style sheet is in the same folder and accessed using a relative link, it doesn't seem like a case where security would be an issue. Also, the error message about not being able to parse the file. doesn't sound security related.

To see whether this could be related to a customization in your current Firefox profile, could you try a three-minute experiment?

Create a new Firefox profile

A new profile will have your system-installed plugins (e.g., Flash) and extensions (e.g., security suite toolbars), but no themes, other extensions, or other customizations. It also should have completely fresh settings databases and a fresh cache folder.

Exit Firefox and start up in the Profile Manager using Start > search box (or Run):

firefox.exe -P

Any time you want to switch profiles, exit Firefox and return to this dialog.

Click the Create Profile button and choose a name like TEST. Please bypass the option to change the folder location. Then start Firefox in the new profile you created and try your page.

Any change in behavior?

When returning to the Profile Manager, you might be tempted to use the Delete Profile button to get rid of TEST. But... it's a bit too easy to accidentally delete your "real" profile, so I recommend resisting the temptation. If you do want to clean up later, I suggest making a backup of all your profiles first in case something were to go wrong.

more options

What does it say in Tools > Page Info > General about the encoding if you open the CSS file in a Firefox tab?

more options

Type: text/css Render mode: Quirks mode Encoding: windows-1252

more options

Does the main HTML has the same encoding?

Firefox can be quite sensitive to a different encoding for included CSS and JS files as opposed to the main HTML file.

more options

Strange that Firefox sees windows-1252 encoding when you re-saved the file with UTF-8 encoding earlier in this thread. Or maybe I didn't sufficiently explain what I was suggesting in that post. That happens sometimes...

more options

Question frpm cor-el: Does the main HTML has the same encoding?

Answer: No. The main html file has the following:

Type: text/html Render mode: Standards compliance mode Encoding: UTF-16LE

more options

I did save it as UTF-8 earlier in the investigation.

However, because that did not fix the problem, I went back to using my text editor in its standard mode, which is probably not UTF-9.

more options

I tried creating a new profile called TEST as suggested and started FF using that profile.

Result: no change - the problem persists...

more options

Chosen Solution

Aha, you do have a UTF-16 mismatch, but I had assumed it was the CSS file that was UTF-16 and instead it's your page. Please use the same encoding for the main page and all external CSS and JavaScript files you link into it. I don't know what encoding is best for Esperanto!

more options

Yes - that's fixed it!

So, the rule is: html, css, js, etc files all have to share the same encoding (whatever it may be is). Correct?

I had to use UTF-16LE for the html content in order to use special characters needed by Esperanto! I had no idea thought that the encoding had to be shared with the css.

It may be worth passing this wisdom on, or putting it somewhere prominent, for the benefit of others.

BTW: many thanks to cor-el and jscher2000 for your help in this matter. I am most impressed by the standard of support.

Also, this experience has made me realise what a wonderful product FF is (together with the support tools). Congratulations and keep up the good work!!

more options

I would say it's rule of thumb.