Treehouse: 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)
    as you can see it looks fine, it follows the baseline grid pretty perfect.

    Now its starting to get nasty, the text jumps up a few pixles making everything look awful.

    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,

    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

    margin-top: 24px;
    font-family: Helvetica, Geneva, sans-serif;

    Code used for <h1>FELIX</h1>

    #logotype h1{

    font-size: 60px;

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

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



    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.