Another CSS problem in Firefox

Can't seem to set the color for headings

[c5VamPirE]

Hi guys, I have been reading a lot of the CSS in Firefox related posts and couldn't solve my problem. The h1 and h2 headings come out different in FF, for example they don't seem to change color. Here is a sample of the external CSS:

h2 {
margin: 0px;
padding: 0px;
color: #021d4d;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: 1.5em;
font-weight: bold;
line-height: 125%;
}

Can someone help me figure out what the problem is?

[Robin_reala]

That looks fine to me (although it could be optimised a bit using shorthand), which suggests there’s a more fundamental problem. First up, have you validated your CSS [jigsaw.w3.org]? It could be that you haven’t closed an earlier rule.

Regarding shorthand optimisation, here’s your code but smaller:

h2 {
margin: 0;
padding: 0;
color: #021d4d;
font: bold 1.5em/1.25 Arial, Helvetica, sans-serif;
text-align: left;
}

Values of 0 are the same across al units so a unit suffix isn’t needed.

[c5VamPirE]

Thanks for the shorthand it makes it look better but doesn't solve the problem.
I have validated the CSS sheet and there doesn't seem to be any errors. What is above and below h2 in the style sheet is basically h1 and h3 up to h6 so nothing really fancy.

Really confused, sometimes when I actually reload the page in FF it comes out just the way it should at other times refreshing doesn't matter

[Robin_reala]

The optimisation wasn't going to fix the problem, was just a sidenote :)

The fact that it works sometimes and not others is odd. If you've got extensions installed have you tried running Firefox in safe mode [kb.mozillazine.org] to see if it's a problem with those?

[c5VamPirE]

yes I understand that the optimization wasn't going to fix the problem and thanks for the free tip :) makes the sheet look less complicated.

I have just tried the safe mode (which I did not know about so thanks once again) but the page still shows wrong colors for the h1, h2,...etc tags and I believe the fonts are wrong also. It seems to be setting the font sizes, line-height and weight correctly though which makes me even more confused. It's a shame that I can't actually post a link here to show you what I mean and also see if it is something with my browser.

Any other hints? I have told my wife to view it tomorrow from her work to see if it is something wrong with my FF. I will also remove everything in the CSS and only leave the h2 tag and see if the h2 come out right and report back.

[Robin_reala]

Yep, best thing to do in this situation is to take a copy of the page and CSS, then start ripping stuff out until it starts working. If it still doesn’t work and you’ve removed everything you think you can then post up your code (HTML + CSS) here and we’ll have a look.