CODEWITHSUNDEEP
csslayoutbrowserdrop-cap
Sam
Sam

Reputation: 15506

Drop caps resulting in different letter height in Firefox

My entire website looks nice on Chrome. When I tested it in Firefox however, I noticed the height of the drop cap is too high. Examine the good positioning height left in Chrome, and the way too high positioning on the right in Firefox:

Chrome: . . . . . . . . . . . . . . . . . . Firefox:

enter image description here . . . . . enter image description here

column:first-of-type p:first-of-type:first-letter{/* Drop Caps */
    font-size: 3.4em;
    margin: 0 0 -0.1em 0;
    padding: 0 0 0 .75em;
    line-height: 1em;
    float: left;
}

What can be tweaked here just for Firefox specifically to bring the height back a little, making it mimic the Chrome rendering?

I don't care about the other differences, I just want the black letter on Firefox to be a little lower.

Upvotes: 0

Views: 145

Answers (0)

Related Questions