First letter browser conflict

Question

I did a styling for my webpage paragraph, so it would have a nice paragraph first letter, it works fine on firefox:

and then I tried chrome:

Here's the code:

.about p{
    font-size: 20px;
    font-family: timesnewroman;
    margin: 20px 80px 90px 80px;
}

.about p:first-letter{
    text-transform: uppercase;
    font-family: schmuckinitialen;
    font-size: 100px;
    float: left;
    height: 100px;
    /*padding-top: 50px;*/
}

I also tried giving it padding, and some other options, but it didn't help. Does someone know how to make this cross-browser?

EDIT The case is solved. To clear things up for anyone who has questions, yes, this is a 100% web font generated in fontsquirrel, and I am using official css reset.

Answer 1

Try line-height attribute on the pseudo selector,

http://jsfiddle.net/59ZHU/2/

.about p:first-letter{
    text-transform: uppercase;
    font-family: schmuckinitialen;
    font-size: 100px;
    float: left;
    height: 100px; 
    line-height:87px; //Add this line
}