SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    cross browser font-size issues?

    Anyway, I am trying to create a base-line grid like its done in print ( not a lkayout grid, but essentially I want the baseline of all my text to line up) I read some articles about this and the concept seemed pretty simple.

    The problem I am encountering is ... well hard to explain. I have reset the body font-size and line-height, still the values which make every line up perfectly in one browser is off or WAY off in another. As if FF thinks that 2 * 2=4.3 but Safari knows it's 4 and Opera guesses it to be 4.06..???


    At this point I dunno if it's me or the browsers and this is just something that cant be done to that degree of exactitude...



    this is the idea:

    *{padding:0;margin:0; font-size: inhherit; line-height: inherit}
    html { min-width: 960px}
    body{ font-size: 12px; line-height: 20px; font-family:arial, helvetica,san-seriff;}
    #page{width:960px; margin:0 auto; }
    .clrf:after{display: block;content: ""; clear: both}
    .col3 { background: url(baseline.gif) }
    .col{float: left;}
    .col3 .col {width:320px; }
    .col .block + .block{margin-top:3.4em}
    .block * {position:relative; margin-left:20px;}
    .col p {top:.5em }
    .col h5 {top:.5em; font-size: 100% ;}
    .col h4 {line-height: 1.15em; font-size: 150%; top:.2em ; font-weight: normal}
    .col h3 {line-height: 1.07em; font-size: 170%; margin-bottom:.8em}
    .col h2 {line-height: .8; font-size: 200%; margin-bottom:.1em; top:.1em }
    .col h2 {line-height: 1.33; font-size: 250%; margin-bottom:.07em; top:-.3em;}
    .col h2 {line-height: 1.33; font-size: 250%; margin-bottom:.1em; top:-.3em;text-transform: uppercase;}
    .col h1 {line-height: 1.12; font-size: 300%; text-transform: uppercase; top:-.22em}
    .col h1, .col h2 { font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; text-transform: capitalize; }



    <div id="page" class="col3 clrf">
    <div class="col">
    <div class="block">
    <h1> This is an H1 tag. This is the headline for the first </h1>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>
    <div class="block">
    <h2> This is an H2 tag. This is the headline for the first column </h2>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>
    <div class="block">
    <h2> Another headline for the first column(h2) </h2>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>
    </div>
    <div class="col">
    <div class="block ">
    <h4>Headline for second column, and H4 tag</h4>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>
    <div class="block box">
    <h4>Headline for 2nd column! an H4</h4>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>
    <div class="block">
    <h3>Wrap around Headline for Second column!, both Headlines are H3s</h3>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>
    <div class="block">
    <h5>Wrap around Headline for Second column!, both Headlines are H5s</h5>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>

    </div>
    <div class="col">
    <div class="block">
    <h4>Headline for third column, and H4 tag</h4>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>
    <div class="block">
    <h4>Headline for 3rd column! an H4</h4>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>
    <div class="block">
    <h3>Wrap around Headline for Third column</h3>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>
    <div class="block">
    <h5>Wrap around Headline for Second column!, both Headlines are H5s</h5>
    <p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
    </div>

    </div>
    </div>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Can you show us a site where this is at? You mgiht want to validate your CSs and HTML because I notice one error in the CSS just by looking at the first line
    Code:
    *{padding:0;margin:0; font-size: inhherit; line-height: inherit}
    font-size:inhherit
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    It's not gonna fly. Font sizes vary on your machine from browser to browser. Think how they will vary on others' machines.

    Web does not equal print, any more than painting oranges red makes them equal apples.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    But max,
    isint that what the reset does:
    body{ font-size: 12px; line-height: 20px; font-family:arial, helvetica,san-seriff;}
    setting the font/ font size and line spacing to a default numerical value from the start?

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ryan,


    I have upped 2 versions:
    http://raym31.home.comcast.net/~raym31/baseline/ff.html
    http://raym31.home.comcast.net/~raym...ne/safari.html

    One works in FF the other in Safari same HTML , same CSS framework ( but I changed the .col x? values) .. And that's what doesnt make sense, btw.. if you change the font with each document it still lines up .. so I dont think its the typeface. It seems to me that all these browsers are interpreting measurements differently 2 IS NOT eqaul to 2 from one browser to another... :/

    but maybe i just have more typos?

    OH... keep in mind that the only thing that should seem to always land on blue lines would be the <P> text!

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    But max,
    isint that what the reset does:
    body{ font-size: 12px; line-height: 20px; font-family:arial, helvetica,san-seriff;}
    setting the font/ font size and line spacing to a default numerical value from the start?
    You would think so....

    Look at it this way. I buy a pair of Nikes, size 9 1/2, and they don't fit so good. I buy a pair of New Balances, same size, and they fit like a glove. The size should be a "default," with every 9 1/2 shoe, be it Puma, Adidas, Fila, or Keds, all the exact same size. But it ain't. We are a "variance" species, and that applies to the computers we build and the browsers we build for those computers. A Dell Win XP with Chrome just isn't going to display a 12px font the exact same size a Mac OS will display that font in Safari, at least not to the tolerances you're requiring.

    Someone else who knows more than I do about all this is free to chime in.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    You would think so....

    Look at it this way. I buy a pair of Nikes, size 9 1/2, and they don't fit so good. I buy a pair of New Balances, same size, and they fit like a glove. The size should be a "default,"
    That is a good analogy Max! That is something that we have all experienced and can relate to. The same goes for different brands of clothing.

    Another thing about Mac OS or Win Safari browsers is that they render the font slightly bolder which contributes to what they consider their default font-size & line-height. That is why you can't rely on side paddings to render a widthless nav button the same width in all browsers. I have seen the last nav button drop down to a new line in Safari many times because it ran out of space. That was from people trying to count characters in order to make their widths work out.

    Of course it all blew apart anyway with a zoom!

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Another thing about Mac OS or Win Safari browsers is that they render the font slightly bolder which contributes to what they consider their default font-size & line-height.
    So the default isn't even really a default....

  9. #9
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,836
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Ryan,


    I have upped 2 versions:
    http://raym31.home.comcast.net/~raym31/baseline/ff.html
    http://raym31.home.comcast.net/~raym...ne/safari.html

    One works in FF the other in Safari same HTML , same CSS framework ( but I changed the .col x? values) .. And that's what doesnt make sense, btw.. if you change the font with each document it still lines up .. so I dont think its the typeface. It seems to me that all these browsers are interpreting measurements differently 2 IS NOT eqaul to 2 from one browser to another... :/

    but maybe i just have more typos?

    OH... keep in mind that the only thing that should seem to always land on blue lines would be the <P> text!
    I tried the FF link and it came up with the following warning.

    http://www.graabr.com/l0SeiH/




    .
    Last edited by John_Betong; Feb 11, 2010 at 23:25. Reason: replaced error with warning
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post

    At this point I dunno if it's me or the browsers and this is just something that cant be done to that degree of exactitude...

    You hit the nail on the head with that sentence. It cannot be done because you have little control over how browsers calculate sizes, nor have you any control how users are setup. Rayzur and Black Max have explained why.

    The only solution to your problem is ignoring the problem because it is one that is completely out of your control.

    No one other than yourself will have the site displayed the the way you do.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have set the body to 12px here:

    body {
    font-size: 12px;
    line-height: 1.67;
    font-family:arial, helvetica, san-seriff;
    }
    Then you go on t define this:

    Code:
    .col h4 {
        line-height: 1.15em;
        font-size: 145&#37;;
        top:.15em;
        font-weight: normal
    }
    Now 145% of 12 equals 17.4

    Now some browsers may apply 1.15 x 17.4 and some will apply 1.15 x17 as they have rounded the total down to start with. I believe Firefox always tries to maintain an overall picture so that multiple sections aren't rounded up to more than the whole whereas other browsers simply round up and down each individual piece and reach a different conclusion.

    If you were to make the percentages more exact the differences would be less.

    e.g.

    Code:
    .col h4 {
        line-height: 1.15em;
        font-size: 141.7%;
        top:.15em;
        font-weight: normal
    }
    .col h3 {
        line-height: 1.04em;
        font-size: 159%;
        margin-bottom:1.03em;
        top:.06em
    }
    Indeed you could use pixel sizes as you have already set the body to 12px so percent based sizes are useless unless you are going to increase the body at a later date and then the inner elements would maintain the relationship to the body of course. If however you are setting the body to 12px forever then you may as well use pixels for font-sizes and get them exact.

    There will always likely be a 1px rounding error as the em leading will often have to be split across top and bottom which is why most baseline css works out dimensions that are not uneven in any way.

    Kevin discusses baseline css frameworks at the end of his talk here and someone mention an em based baseline was available in the discussion at the end but I wasn't going to sit through an hour just to find where it was but you are welcome to (Of course I may have misheard anyway ).


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
  •