SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    line-height in pixels and font-size in percent.. correct?

    Hi

    Is that correct to have something like this?

    Code:
     line-height: 17px; 
     font-size: 75%;
    Should I have the line height in percent as well? What would be equal to 17px in percent?

    thanks in advance

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2004
    Location
    Minneapolis, MN
    Posts
    1,924
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't believe it will matter. I've done line height it pt (forgot what it stands for) and my font size in pixels.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If your font size is going to be set in percentages, set your line-height to a percentage as well for consistency. If a user bumps their text size up to something past 17px tall, your lines will run into each other.

  4. #4
    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)
    Yes as Vinnie says if the line-height is fixed in pixels and the font is percent then the font will grow but the line-height will stay the same and the font may grow out of the line.

    If you use percent or ems for line-height then they stay proportional to each other as the text is resized.

    If you have the font-size int the body set to 12px and your p tag set to 75% then that will be 9px high. So you can work out from there how much bigger 17px line height would need to be (about 1.9ems if my maths is correct )

    Paul

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    If you have the font-size int the body set to 12px and your p tag set to 75% then that will be 9px high. So you can work out from there how much bigger 17px line height would need to be (about 1.9ems if my maths is correct )
    It's actually 1.8888888888888888888..... ems, but that's just splitting hairs

  6. #6
    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)
    lol - but I worked it out in my head not on a calculator

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    lol - but I worked it out in my head not on a calculator
    I did too. Any number divided by 9 will just repeat itself. Example:

    2/9 = .2222222222222

    Ex-math major here

  8. #8
    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)
    Any number divided by 9 will just repeat itself
    how about 9/9

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul: well it is equal to 1.00000... if u think about it

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    how about 9/9
    The remainder repeats itself, smarty pants

  11. #11
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol

    thanks guys

  12. #12
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    btw... can anyone tell what is the math for translating pixels into em?

    now, what if I let the margin in px? Is that a problem (in terms of consitancy):
    Code:
    body { 
     background: #fff;
     color: #000; 
     margin: 10px;
     line-height: 1.9em; 
     font-size: 0.75em; 
     font-family:Verdana, Arial, Helvetica, sans-serif;
     text-align: center;/* center for ie5*/
     }
    and also.. one last thing... when the text appears in the context of a form, such as in the above code. When setting the size of the text to something quite big (using my browser) I realized that the input fields and the text don't line up nicely... why is that? can I avoid that?
    Code:
    <fieldset>
    <legend>Admin Login</legend>
    
    <form action="/admin/home.php" method="post">
    
    <p> 
       <label for="username">Username</label>
       <input type="text" name="username" title="input your  username here" size="20" maxlength="30" />
    </p>
    <p> 
       <label for="password">Password</label>
       <input type="password" name="password" title="input your password here" size=20 maxlength="30" />
    </p>
    <p></p>
    <p> 
       <input type="submit" value="login" title="click this button to login in the admin control panel" />
    </p>
    
    </form>
    
    </fieldset>

  13. #13
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    There's no real way to directly translate pixels to ems. Ems are based on the user's default text setting in their browser. Most browsers' default size is 14px unless the user decides to change it, but some browsers have 16px as the default. If you need to use pixels, then use pixels. Otherwise, if you have more flexibility in your layout use percentages or ems.

  14. #14
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So using % or ems is quite the same is that it?
    In this case I think I will feel more comfortable with ems...

    what about the 'resizing text/forms' issue?


  15. #15
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by duuudie
    So using % or ems is quite the same is that it?
    In this case I think I will feel more comfortable with ems...
    Use what you're comfortable with. They pretty much do the same thing.
    Quote Originally Posted by duuudie
    what about the 'resizing text/forms' issue?
    What do you mean? A user will resize text if they need to (I tend to do it on small-text sites myself; my eyesight isn't so great if I don't have my contact lenses in). Make sure your layout can accommodate at least a few different text sizes if possible. .


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
  •