Grow your CSS skills. Land your dream job.

Line-height problem in firefox & opera

  • # May 20, 2010 at 1:17 pm

    Hello everyone!
    I got some problems with line-height in Firefox & Opera.

    I am gonna provide you with some pictures,

    Safari & Chrome (Webkit)
    [img]http://upit.cc/images/c22bd659.png[/img]
    as you can see it looks fine, it follows the baseline grid pretty perfect.

    Firefox
    [img]http://upit.cc/images/ee8c9fd8.png[/img]
    Now its starting to get nasty, the text jumps up a few pixles making everything look awful.

    Opera
    [img]http://upit.cc/images/abcde1d2.png[/img]
    And Opera looks pretty much the same as Firefox, except it pushes the <h1> (FELIX) up even more.

    So I’m guessing that firefox and opera handles line-height slightly diffrent, can you get around this with some type of hack?

    To clear some things up, the layout follows a 24px high grid,

    Code:
    body{
    background:url(gridbg.png) repeat scroll 0 0; /*grid background with a height of 24px*/
    color: #333;
    font-size: 16px;
    line-height: 24px;
    font-style: normal;
    font-weight: normal;
    }

    Code used to wrap the logotype

    Code:
    #logotype{
    margin-top: 24px;
    font-family: Helvetica, Geneva, sans-serif;
    }

    Code used for <h1>FELIX</h1>

    Code:
    #logotype h1{

    font-size: 60px;
    line-height:48px;
    }

    Code used for <h2>THOUGHTS & WORK</h2>

    Code:
    #logotype h2{
    font-size: 24px;
    line-height: 24px;
    color: #ff6968;
    }

    Thanks!

    /Felix

    update: could this be because im using PX’s instead of EM’s?

    # May 22, 2010 at 7:56 am

    All I can add is that most examples of typographic grids use em’s so maybe try using those.

    It just looks like Webkit and Mozilla/Presto render the line-height of font’s in a different way.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".