Grow your CSS skills. Land your dream job.

:first-letter Pseudo selector problem

  • # April 9, 2010 at 9:10 am

    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!

    # April 9, 2010 at 9:01 pm

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

    # April 20, 2010 at 10:35 am
    "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 :?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".