Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Apr 2005
    Posts
    23
    Member #
    9543
    I am going slightly insane with the way fonts display on different browsers so differently. Now I hope to have better luck with using em sizes that adapt to resolution. How do I make use of them correctly so to have less discrepancy between font display across browsers?

  2.  

  3. #2
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    Code:
    ...<head>
    <style type="text/css" media="screen">
    p { 
    
       font-size: 0.8em;
       font-family: tahoma, arial, helvetica, sans-serif;
    
    }
    
    </style>
    <head>...
    Code:
    ...<body>
    <p>This is some text displayed in 0.8em font size.</p>
    </body>...
    0.8em is an ideal main body font size (imo), but it's important to remember that these sizes remain relative to their parent element. This is also my unit of choice for font sizes and occasionally even margins/padding if I want content areas to expand along side the text.

  4. #3
    Junior Member
    Join Date
    Apr 2005
    Posts
    23
    Member #
    9543
    these sizes remain relative to their parent element
    what exactly do you mean by parent element, where is that referenced? should that be an absolute font size?

  5. #4
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    Parent/Child elements, just think of them like Russian Dolls.

    Code:
    <div id="parent" style="font-size: 0.8em;">
    
    This text will appear larger than the text within the paragprah.
    
                <p id="child" style="font-size: 0.8em;">
                                  This text will appear 
                                  smaller despite the same 
                                  measurement being used.</p>
    </div>
    Does that make sense?


    There's an article here than might make further useful reading...

  6. #5
    Senior Member
    Join Date
    Aug 2003
    Posts
    444
    Member #
    2801
    The parent element is where the tag is. For example, all DIVs and Ps (div and p tags) are inside the BODY tag. Therefore, the BODY is the parent of DIV and P. Likewise, if you have a nested div like:

    Code:
    <div id="1">
       <div id="2">Some text in div 2</div>
    </div>
    Then div1 is the parent of div2, and the body is the parent of div1.

    Now, suppose that the body has a font size of 0.8em and that div1 has a font size of 0.9em. The text in div1 will be 0.8*0.9 em in size. Now if div2 has a font size of 1em (the default) its font size is 0.8*0.9*1.0. As I said, if no size is given, the default is used (which is 1 * whatever the size of the parent is).

    This inheritance of properties is why CSS is called cascading style sheets.

    Hope this helps.
    eKstreme
    eKstreme.com - Free website tools!
    fontfox - free fonts Hand-picked quality fonts.

  7. #6
    Junior Member
    Join Date
    Apr 2005
    Posts
    23
    Member #
    9543
    thanks alot, it makes a whole lot more sense to me now.
    One more question:
    What about cross browser usage of that font size unit? I am looking for a unit that is reliably similar on the newer IE and Mozilla, or at least close in appearance.

  8. #7
    Junior Member
    Join Date
    Apr 2005
    Posts
    23
    Member #
    9543
    this is just not working

    body {
    background:#D4D2B4;
    margin:0;
    padding:0;
    font-family:'trebuchet ms',arial,verdana,sans-serif;
    font-size:2em;
    color:#055c23;
    }

    now it should just be applied to all the text in the body no matter if it is in a list or anywhere else, am I right? Fact is, changing the em size doesn't change the appearance on screen.

  9. #8
    Senior Member
    Join Date
    Aug 2003
    Posts
    444
    Member #
    2801
    The em sizes (of course) vary between browsers. But invariably, around 0.8em is a good size for browsers. The variation is there but it's not that big.

    Also, if you can post a link to the troublesome page...
    eKstreme
    eKstreme.com - Free website tools!
    fontfox - free fonts Hand-picked quality fonts.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:04 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com