SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    zooming in + out x-browser

    Hi - I'm getting a bit confused, are these 2 pages

    https://developer.mozilla.org/en/CSS/line-height
    and
    http://www.w3schools.com/css/css_font.asp

    saying that I should always have:

    body {font-size:100%;}

    p {font-size:0.875em;}

    line-height: 1.1;

    In other words, it's best to always use em for font, no em for line-height, and always set body font-size to 100%?

    This way it all zooms in and out perfectly x-browser?

    Look at this, I've moved my draft template into wordpress:

    http://www.greensmoothie.com/gs/

    Description: A copyrighted WordPress theme by Val Archer with help from forum members at http://www.sitepoint.com/forums/

    cool eh? Now all I have to do is move 100 pages of data over into WP!

    Val

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You never really need to se the body font size to 100% except to fix an IE bug, but it doesn't hurt to specify it.

    You should always specify either a relative unit for your font size. Aka em or %. Don't use px because IE won't allow for text resize.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The percent in the body is to cure an IE zoom bug. If you use ems for the body the text resize gets all out of whack.

    For other elements em or percent are exactly the same thing as far as font size is concerned and makes no difference which you use.

    Unit less line heights are best but 1.1. would be a bit small for my liking.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh that's a lovely link, thank you Paul - I'll change all my line-heights to unitless.

    best, Val

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to read up on that bug:

    em font resizing bug
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - thanks for the link! What does s/he mean by "Note that this IE-bug can be re-triggered if font-size keywords are used anywhere in a document."

    What's a keyword?

    Back to limitless line-height, is, e.g.

    (1) line-height:130% always 1.3?

    so 120% is 1.2, 125% is 1.25 and so on?

    (2) and is line-height:1.3em always 1.3?

    so 1.2em is 1.2, 1.25em is 1.25 and so on?

    (3) and line-height:50px; - to center txt vertically

    should that be 50%, same way you do 50% for image to center it vertically?

    thank you! - Val

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by valarcher View Post
    What's a keyword?
    These:

    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large

    Back to limitless line-height, is, e.g.

    (1) line-height:130% always 1.3?
    It is equivalent to 1.3 times the parents font-size. It is a scaling factor that is passed on down to the children unlike percentages where a computed sized is passed to the children and the scaling factor effectively ends.

    (2) and is line-height:1.3em always 1.3?
    em and percent are the same thing when applied to font-size. 1.3em is exactly the same as 130%

    (3) and line-height:50px; - to center txt vertically
    line-height is added in the form of half-leading to the top and bottom of a font which means the font is more or less centred in the line-height that you set. If you have a block box 50px high and you want some non wrapping text centred vertically in that box you can set the line-height to the same height of the box causing the text to be centred. If the text wraps to another line then it won;t be centred within that element and indeed won't fit.

    should that be 50%, same way you do 50% for image to center it vertically?
    No that would cause the line-height to be half the size of the parent font and therefore not big enough to contain the font at all and you would probably get strange results cross browser.

  8. #8
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - thank you! I took the plunge and deleted % and em next to every line-height and it all displays correctly.

    If you can't use keywords without triggering the IE bug, does that mean the css should contain font-sizes for
    # x-small
    # small
    # medium
    # large
    # x-large

    and then you span the word/s that you want smaller or larger?

    thanks, Val

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by valarcher View Post
    Hi Paul - thank you! I took the plunge and deleted % and em next to every line-height and it all displays correctly.

    If you can't use keywords without triggering the IE bug, does that mean the css should contain font-sizes for
    # x-small
    # small
    # medium
    # large
    # x-large

    and then you span the word/s that you want smaller or larger?

    thanks, Val
    I'm not sure what you are asking there Val.

    Just don't use keywords and you will have no issues. Keywords vary in size between browsers anyway so there is no consistency.

    Just apply the font sizes you require using em/percent (or px if you don't care about ie6) and you are good to do. No need to use the larger or smaller keywords as that will be inconsistent also. You are the designer so set it at what you want it to be.

  10. #10
    SitePoint Addict
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - thanks million, I got it!

    best, Val


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
  •