H1 tag styling not working in FF (works in IE & Safari)

H1 tag css styling not showing in FireFox - works in IE and Safari

[digitalsquare]

Hi all..

Some googling about my problem brought me to these forums so i thought i would sign up and post directly and i could not find a solution using google (and this forum seems like an excellent source of info!)

I have never come across this problem before.

I have a webpage i am coding in XHTML 1.0 Transitional and stlying with CSS. Firefox has decided to stop showing/displaying the styling set my CSS file for all "H" tags, namely H1 and H4 which are in use in my page at the moment.

I have checked over my code and cant see any problems - the styling works and is applied in IE and Safari, and it did work in Firefox until recent, but i cant for the life of me think of anything ive changed which may effect this.

Any ideas?

My CSS is:

h1,h2,h3,h4,h5 {
 padding: 0;
 margin: 0 0 5px 0;
 }
h1 {
 color: #0E47A1; 
 font: normal bold 1em 'Trebuchet MS', Arial, Helvetica, sans-serif;
 }
h4 {
 color: #fff;
 font: normal bold 0.8em 'Trebuchet MS' Arial, Helvetica, sans-serif;
 padding: 1px 0 7px 3px;
 background-color: #0E47A1;
 background-image: url(images/h4_shadow.gif);
 background-repeat: repeat-x;
 background-position: 0px 17px;
 }

H1 Tag Code:

 <div id="mainContent">
 <h1> <img src="images/feature.png" alt="" title="" /> </h1>
 <div id="contentContainer">
 <h1>WELCOME</h1>
 </div>
 </div>

H4 Tag Code:

<div class="sidebox">
 <h4>Join our Mailing List</h4>
 *mailing list form code here*
</div>

[tangor]

Have you checked to see if your FF font defaults have been changed by accident?

[D_Blackwell]

I see no problem in rendering here. The CSS does not validate however. A comma is missing after the first font-family value.

h4 {
color: #fff;
font: normal bold 0.8em 'Trebuchet MS' Arial, Helvetica, sans-serif;
}

.8em is sufficient, though it does not affect validation.

[digitalsquare]

Tangor:
I havn't changed any FF font defaults but how would i go about resetting them back to default to rule this out?

D_Blackwell:
I did try adding the missing comma in, and it didnt make any difference to the rendering inside FF (i will re-add it for CSS validation though)

[tangor]

FF: Tools/Options/Content/Fonts/Advanced, check Allow Pages to Use Own Fonts...

[digitalsquare]

That box was already checked. I unchecked it and it then applied default fonts (making the page worse) so i then re-checked it telling the pages to use their own CSS style, but the problem still remains.

Only effecting H tags... im puzzled!

[tangor]

Scratching head... like D_Blackwell the code renders correctly. Have you cleared your browser cache? What version Firefox?

[digitalsquare]

Hey,

After clearing the browser cache and updating to the latest version of FF (in addition to adding the missing comma's after Trebuchet MS in the font styling) the H tags finally displayed correctly!

Thank you for your replies and time - it is greatly appreciated!

Many thanks again :)

[tangor]

digitalsquare... thanks for reporting back! Always nice to know there are resolutions to the questions, and that perhaps some of the replies were responsible... that's what keeps us going!

[digitalsquare]

no problem! :)

Hope it helps out someone else in future!