539010 - The linked CSS is not being parsed/applied to the page.

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Evan Sharp]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)

On the page http://www.biometemerge.com/clouds_template/form/Contact the CSS is linked correctly and is there (http://www.biometemerge.com/clouds_template/scripts/validationEngine.jquery.css), but is not being parsed correctly. This has been tested on other computers (same FF build). Firebug's CSS viewer says "There are no rules in this stylesheet." and displays no stylesheet rules when that .CSS file is selected to be displayed.  After clicking the 'Edit' button in Firebug to edit the CSS rules you can see the plain text for all of the rules in that file.  If you make an edit it will apply all of the rules in that CSS to the page.  You can undo your edit (make the file the same as the original) and it will still have the rules applied to that page.  The CSS file and rules are applied and correctly work in MSIE7,8 and Safari 3.2.1.  This CSS file works correctly on other pages with the same system (http://www.biometemerge.com/sage_template/form/Contact).

Reproducible: Always

Steps to Reproduce:
1. Go to http://www.biometemerge.com/clouds_template/form/Contact
2. Click the Submit button to have the divs appear
3. Notice that the CSS from http://www.biometemerge.com/clouds_template/scripts/validationEngine.jquery.css is linked but not being applied
Actual Results:  
The div tag appear, properly named with correct class information but the CSS information for that class is not being applied.  And via firebug, you will notice that the CSS file is there, but the rules are not being noticed.

Expected Results:  
It should parse and apply the CSS rules in the linked CSS file

Tested on 3 other computer, same site, same problem.  Does not appear to happen on another site using same files.

Comment 1

[Robert Longson [:longsonr]]

The css file is being served with a mime type of text/html (use Tools->Page Info to check). It must be served with a mime type of text/css if you want it to work.

See https://developer.mozilla.org/en/Incorrect_MIME_Type_for_CSS_Files

Comment 2

[Evan Sharp]

Thank you Mr. Longson.  But now that means that there is a but that it is working on this site: http://www.biometemerge.com/sage_template/form/Contact it is being sent as text/html but is parsed and applied as text/css

Comment 3

[Robert Longson [:longsonr]]

Check out the pages yourself using the Tools->Page Info screen. You will see that one (the one you say works) is using Render Mode:Quirks mode and one is using Standards Mode. You will find the article in comment 2 covers that too.

Comment 4

[Robert Longson [:longsonr]]

Oops I meant comment 1.