FF3 calculates ems differently than all browsers

**tonearm** · Mar 8, 2009 12:13

Firefox 3 calculates ems differently than all other browsers (including FF2) when the body tag has a font-size % declaration.

My design is source-ordered so the page's content appears first in the code, and the top navigation bar is absolutely positioned above the content. In FF3, the navigation bar covers the top line of content, but not in any other browser.

Here is some very simple code that demonstrates the problem:

Code:

<html>
   <body style="font-size:70%">
      <div style="font-size:1.5em;margin-top:1.5em">CONTENT</div>
      <div style="position:absolute;top:0;margin-top:1.1em;width:100%">
         <div style="border-width:1px;border-color:#000000;border-style:solid">&nbsp;</div>
      </div>
   </body>
</html>

You can see that the CONTENT appears inside the navigation bar in FF3, but below it in every other browser. This inconsistency disappears if the font-size declaration is removed from the body tag and/or the font-size of the CONTENT div is changed to 1em. This means FF3 is taking font-size:70% into account for it's CONTENT div margin-top em calculation and all other browsers are not.

Does anyone have any suggestions on how to work with this? If I don't declare font-size:70% in the body tag, font sizes in IE are way too big. I would like the font size of the content to be larger than 1em. The above example is on a small scale, and in my actual design, adding extra margin-top ems to the CONTENT div will create a very large gap between the navigation bar and the content in every browser except FF3.

**drhowarddrfine** · Mar 8, 2009 12:52

You are in quirks mode but I haven't looked at it yet.

EDIT: If you properly add a doctype, you'll see things are different but I still haven't looked around much.
In fact, I don't see any need to look any further without a proper doctype.

**tonearm** · Mar 8, 2009 13:19

As I said, the code above is a simple demonstration. Here's some more code that works exactly the same way:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <body style="font-size:70%">
      <div style="font-size:1.5em;margin-top:1.5em">CONTENT</div>
      <div style="position:absolute;top:0;margin-top:1.1em;width:100%">
         <div style="border-width:1px;border-color:#000000;border-style:solid">&nbsp;</div>
      </div>
   </body>
</html>

However, I just discovered that Firefox 3 only behaves this way if a minimum font size is set in it's Preferences. Please set your Firefox minimum font size to 13 for the example above. Firefox 2 did not have this problem.

Would a good solution be to remove the body font-size declaration and change each of my font sizes to 70% of what they are set to now?

**RyanReese** · Mar 8, 2009 14:47

Why don't you try? I tend to avoid using a font-size and just let the default font size do its' work. Normally it's a good size: if it isn't the user changes the min font size.

**vanishdesign** · Mar 8, 2009 16:45

I don't understand the point of the top margin on the absolutely positioned element. You set top: 0; but you set margin-top to something. Also nothing has a height. That kind of bugs me. If I were making this layout I'd put everything into a container, set that position relative, put the top margin on that, set a height for the navigation, and set the content div's top margin equal to that.

Also:
border: 1px solid #000 works a hell of a lot faster than the three border statements. The only time it makes sense to separate them is if you have widths that differ from side to side.

**Centauri** · Mar 8, 2009 17:29

I also don't see why you would want to set the body font size to 70% - for a default browser size of 16px font, this equates to 11px which is far too small for a general use font size. I would think 85 to 90% would be as small as you would want to go on the body declaration.

Any em size calculations will be based on the element's current font size, and if that is larger due to a user-set minimum size, then any calculations based on this will also differ. Another spacing difference between FF & IE in your example code is due to margin-collapse between the content div and the body default margins.

Even if 100% font size is declared for the body, IE should still render the fonts the same size unless the font-size has been changed in the user preferences - IE defaults to 16px like most other browsers.

**Paul O'B** · Mar 9, 2009 08:09

As Graeme correctly pointed out.

Originally Posted by Centauri

Any em size calculations will be based on the element's current font size,

Therefore if you want the margins to be consistent for those two elements then you should ensure that both elements are working with the same font-size (which they are not in your case).

**tonearm** · Mar 9, 2009 09:42

If I were making this layout I'd put everything into a container, set that position relative, put the top margin on that, set a height for the navigation, and set the content div's top margin equal to that.

The reason I can't use a height declaration is the navigation's height is made up of both text (em) and grapics (px).

Therefore if you want the margins to be consistent for those two elements then you should ensure that both elements are working with the same font-size

Thanks Centauri and Paul. I ended up changing all of my font sizes to 1em (except the body tag) which fixes the problem and is actually very readable.

User Tag List

Thread: FF3 calculates ems differently than all browsers

Thread Tools

Display

FF3 calculates ems differently than all browsers

Bookmarks

Bookmarks

Posting Permissions