Question

I am trying to create large initials in < p > elements which should start on sencond line and cover two lines but in firefox the first letter is not positioned as I expect (Works everywhere else, even in IE, only FF makes problems…)

http://jsfiddle.net/6SfHG/1/

Any ideas how to make it start on same level?

Answer 1

This has worked for me, though it’s not very elegant:

So to get a cross browser drop cap effect using :first-letter pseudo-element that ver­tic­ally aligns, you need to apply float: left, then find the height of the typeface cap height, reduce the line-height to that, adjust margin-top so it aligns cor­rectly in Fire­fox and in Opera or a Web­Kit browser, and then using con­di­tional com­ments for an IE only stylesheet remove margin-top and change line-height to cor­rectly ver­tic­ally align the type.

p::first-letter {
  float: left;
  font-family: Georgia, serif;
  font-size: 75px;
  line-height: 60px;
  padding: 3px;
}

http://nickcowie.com/2009/drop-caps-first-letter-and-firefox/