0

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Sam
  • 15,254
  • 25
  • 90
  • 145
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Aug 20 '22 at 08:15
  • I have provided the shortest possible relevant code! Your suggestion would unnecessarily complicate the question. My question is simply about wether there is a way (if so, how) to change the height of an element in only a specific browser (in this case Firefox) without changing anything in other default browsers. – Sam Aug 20 '22 at 09:00
  • 1
    Please provide a runnable snippet - otherwise we have to guess/work out backwards your HTML structure. It is easy for you to do (use the <> when you edit the question) and it makes it so much easier to provide an accurate answer. – A Haworth Aug 20 '22 at 09:17
  • 1
    I've just tried a simple drop cap in FF and Edge/Chrome (all on Windows10) and I do not get the problem, The code you have given so far is *not* enough to demonstrate the problem. Please create a runnable snippet that does show the problem. – A Haworth Aug 20 '22 at 09:24

0 Answers0