:first-letter Pseudo selector problem

[Carlete]

Hey!

I’ve been working on a project that uses the ":first-letter". When i see the website on Firefox, everthing is fine, but when i see it Chrome, it’s displayed like it reserved less space… to debug this i made it draw the borders of the box containing the letter and i got this:

[attachment=0]first-letter-problem.png[/attachment]

Code:

p:first-letter {
font-size: 500%;
display:block;
float: left;
color: #000;
margin: 2.5px 3px 0 0;
border: 1px solid black;
}

Does anyone knows why this is happening? and how do i solve it?

Thanks!

[Chris Coyier]

Might wanna mess with line-height. Maybe try line-height: 1; — or tweak and see if you can get something consistent cross-browser.

[Carlete]

"chriscoyier" wrote:

Might wanna mess with line-height. Maybe try line-height: 1; — or tweak and see if you can get something consistent cross-browser.

Thanks Chris! I had to use line-height: 65% in order to make it work in Chrome… why 65%? just trial and error :?

[Author]

Posts