Line-height problem in firefox & opera

[Felix]

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?

[ChrisRadford]

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.

[Author]

Posts