Grow your CSS skills. Land your dream job.

Wanted to share a solution (Drop-caps)

  • # April 4, 2013 at 4:07 am

    So this article: http://css-tricks.com/snippets/css/drop-caps/

    Addresses CSS and Drop-caps. Problem was, I needed only the first letter (of all first paragraphs) to be a Drop-cap. This was suggested by the author:

    p:first-child:first-letter

    But that doesn’t have < ie8 support. So I thought really hard and came up with this:

    #column-left h6 + p:first-letter {
    font-size: 3em;
    }

    Basically ensuring that only paragraphs immediately following the h6 tag would be drop-cap-a-fied. And it works on IE 10, 9, 8, and 8 compatibility mode so I’ll assume 7.

    I think this is a solution that could work for a lot of people … though admittedly I don’t think a lot of people have drop-cap issues :). Here’s the site I’m working on that I implemented the fix on:

    http://tannercampbell.net/writerssquare

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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