SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FF3 calculates ems differently than all browsers

    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.

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also don't see why you would want to set the body font size to 70&#37; - 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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    As Graeme correctly pointed out.

    Quote 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).

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •