font size difference between Firefox and IE

[Elemental]

Hey Folks, I tried looking this up on Firefox's support forums but didn't find what I was looking for or my search query was wrong...I have the following html

<div id="container"><div id="headerContainer"><div id="headerTxt"><h1>In The Beginning</h1><h2>"If I knew then what I know now I wouldn't have broken the shell"</h2></div><img id="headerImg" src="images/image_01.jpg" alt="Image_01" title="Image_01" /></div>

here's the CSS (which is linked)

#container{position: absolute;left: 50%;width: 900px;margin-left: -450px; /*set to a negative number 1/2 of your width*/padding:0;border: solid 0px #fff;}#headerContainer{position:relative;width: 900px;margin:5px auto 0 auto;padding:0;border: solid 0px #fff;}#headerTxt{position:relative;z-index:5;float:right;margin:15px 35px 0 0;color:#fff;border: solid 0px #fff;}#headerTxt h1{margin:0;font-size:3em;font-family: century schoolbook,times new roman,courier new,georgia;border: solid 0px #fff;}#headerTxt h2{margin:-5px 0 0 35px;font-size:1.4em;font-family: comic sans ms,kids,verdana,arial,helvetica,sans-serif;border: solid 0px #fff;}#headerImg{position:absolute;margin:0 auto;padding:0;border: solid 1px #aaa;}

I'm using win XP and have IE 8 and the latest FF ver. 3.6 installed; when I view the above on this system it displays as expected on both browsers. However, on another PC I'm running win XP with IE 7 with FF ver. 3.6 but the results are different, either FF is displaying the font smaller or IE is displaying it larger???the DTD is xhtml 1.0 strict.Is the above enough information to get an idea(s) what could be the cause? Or do I need to post the whole thing?Peace,Elemental

[thescientist]

it's probably just IE That's actually an interesting question. If the different numbers for headers changes their size, what determines their largest or smallest size to begin with? Is it a browser default? Or maybe it's confusion between that "default" and the font-size styles you've applied to them? Will be interested to hear what others thoughts are. Maybe if you set a font-size in the body tag headings would take their size relativity from that? Now I'm very interested, hah.

[Elemental]

it's probably just IE That's actually an interesting question. If the different numbers for headers changes their size, what determines their largest or smallest size to begin with? Is it a browser default? Or maybe it's confusion between that "default" and the font-size styles you've applied to them? Will be interested to hear what others thoughts are. Maybe if you set a font-size in the body tag headings would take their size relativity from that? Now I'm very interested, hah.

thescientist, Thank you for your reply, and on a Sunday no less, Much appreciated.Are you saying, if I understand you correctly, that if I declare a body font size in my stylesheet, that would have an affect on the rest of the font sizes I declare later in the stylesheet?Peace,Elemental

[jeffman]

It will have an effect on all sizes defined with relative units, like percents and ems. You have to ask yourself, "relative to what?" If the default size varies from one browser to the next, then absolute values resolved from relative units will also vary. Defining a basic fontsize for the body resets that default, so you get more consistent results.Note that this will not be true for any element whose default size is not inherited or defined relatively.If you like relative units and you're a total control freak (an oxymoron?) then you might use the * universal selector to set a default fontsize for everything. Then of course you'll need to explicitly set fontsizes (absolute or relative) for most of your page elements. This is SOP for designers who use the "total reset" philosophy.

[Elemental]

It will have an effect on all sizes defined with relative units, like percents and ems. You have to ask yourself, "relative to what?" If the default size varies from one browser to the next, then absolute values resolved from relative units will also vary. Defining a basic fontsize for the body resets that default, so you get more consistent results.Note that this will not be true for any element whose default size is not inherited or defined relatively.If you like relative units and you're a total control freak (an oxymoron?) then you might use the * universal selector to set a default fontsize for everything. Then of course you'll need to explicitly set fontsizes (absolute or relative) for most of your page elements. This is SOP for designers who use the "total reset" philosophy.

Deirdre's Dad, Thank you for your input sir, always very much appreciated.So, if I understand this correctly, if I set the body's font to an absolute size say 12pt then all other font size settings I might use through out my document, of em's or percents, would be relative to the 12pt?Peace,Elemental

[jeffman]

I think that's right. Ingolme's the real expert on that stuff.

[Elemental]

I think that's right. Ingolme's the real expert on that stuff.

Deirdre's Dad Thank you again, much appreciated.Well, if he's watching I hope he answers.Peace,Elemental

[thescientist]

have you tried writing all the <Hx> tags on a page and then setting a font-size in the body and changing it?

[Elemental]

have you tried writing all the <Hx> tags on a page and then setting a font-size in the body and changing it?

thescientist, Thank you for the input, again, much appreciated.I was thinking about doing that with the current page I was working on but I've been working on something else that's got me going crazy, I'll be posting that one after this.I'll do the body font thing and post back what I get on this thread for those interested in knowing.Peace,Elemental