698188 - Multiple style sheets: later style sheet's customizations is not read

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Jay Hacker]

Attachment: getCDSinfofromgenbank.html

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.1 (KHTML, like Gecko) Ubuntu/11.10 Chromium/14.0.835.202 Chrome/14.0.835.202 Safari/535.1

Steps to reproduce:

This is Common.css


body {
    background-image: url(cloth024.gif);
    font:             15px Verdana Helvetica Arial sans-serif;
}

div#pagetitle {
    text-align:       center;
    margin:           0px 30px;
    padding:          0px;
    font-family:      Times "Times New Roman", serif;
}

div.highlight {
    margin:           30px;
    margin-top:       0px;
    border:           2px solid gray;
    padding:          10px;
    background-color: #F1E9FF;
}


This is CodeOnlyPage.css


div.highlight {
    font:             13px Times "Times New Roman" serif;
}

.c {
    color:            #9A1900;

    font-style:       italic;
}

.s {
    color:            #FF0000;
}

.k {
    color:            #000000;
    font-weight:      bold;
}

.kn {
    color:            #0000FF;
    font-weight:      bold;
}

.nn {
    color:            #FF2FE0;
    font-weight:      bold;
}

.si {
    color:            #FF0000;
}

.mi {
    color:            #03BFB9;
    font-weight:      bold;
}

.nb {
    color:            #49B64C;
}

.ow {
    color:            #FF8000;
}

.n {
    color:            #36046F;
}

.nf {
    color:            #CB1DFF;
}



Actual results:

The page font is in a sans-serif font while it should be in a serif font.

Comment 1

[Jay Hacker]

in Firebug, the div.highlight from CodeOnlyPage.css is empty.  I've pasted the following:

div.highlight {
}
CodeOnlyPage.css (line 1)
div.highlight {
    background-color: #F1E9FF;
    border: 2px solid gray;
    margin: 0 30px 30px;
    padding: 10px;
}
Common.css (line 13)
Inherited frombody
body {
    font: 15px Verdana Helvetica Arial sans-serif;
}

Comment 2

[Jay Hacker]

I viewed Page Source in FF and then viewed CodeOnlyPage.css and the div.highlight style includes the font, as follows:

div.highlight {
    font:             13px Courier "Courier New" monospace;
}

I changed the serif to monospace (just trying out a good font for code), but it still doesn't work.  The sans-serif from the body of Common.css is what is applied.

Comment 3

[Merike Sell (:merike)]

(In reply to Jay Hacker from comment #1)
> in Firebug, the div.highlight from CodeOnlyPage.css is empty.

Right, different font family names should be separated by a comma: http://www.w3.org/TR/CSS2/fonts.html#font-shorthand
Try the following rule instead:
font:             13px Times, "Times New Roman", serif;

Comment 4

[j.j.]

Validating you CSS files might be helpful:

http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options

Comment 5

[Jay Hacker]

Thank you very much guys.  That worked wonderfully.  I feel stupid now.  Thank you for being patient.

Funnily, I did validate both Common.css and CodeOnlyPage.css at http://jigsaw.w3.org/css-validator/ by file upload, and it said Congratulations! No Error Found.!!!  with the following reports
For CodeOnlyPage.css
Valid CSS information
div.highlight {
font : 13px 'Courier "Courier New" monospace';
}
For Common.css
Valid CSS information
body {
background-image : url(cloth024.gif);
font : 15px Verdana Helvetica Arial sans-serif;
}
div#pagetitle {
text-align : center;
margin : 0 30px;
padding : 0;
font : 15px 'Times "Times New Roman" serif';
}

I wonder if W3C has a bug filer.  But anyways, the compiler (in this case, the browser) is the final word :-).

Thank you again guys.

Comment 6

[j.j.]

Well, quotes are recommended (not mandatory) for font-families with included whitespace.
So the validator apparently assumes a single family name.
I'm not enough familiar with the CSS garammar to claime the validator is wrong here, but it's strange at least. 

Bug reports go here:   http://www.w3.org/Bugs/Public/