SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "first-letter" working in Safari but not Firefox

    My CSS drop-cap using the pseudo-element "first-letter" works fine in Safari but doesn't register in Firefox. Any ideas?


    The CSS I'm using is:

    #entry:first-letter {
    float:left;
    color:#ffaa00;
    font-size:50px;
    line-height:44px;
    padding-top:2px;
    padding-right:5px;
    font-family: Futura, Times, Georgia;
    }


    and the HTML:

    <div id="entry">
    <p>Bla bla bla</p>
    </div>

  2. #2
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does get the drop caps to show up, but it puts them at the beginning of every paragraph, which I don't want.

    How do I make it apply only to the first letter in a <div id="entry"> tag which has multiple <p>'s?

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's an interesting strategy. It would work if I had a simpler stylesheet, but I use all sorts of differently styled <p> classes, so I can't very easily "neutralize" all but the first <p> with this method.

    I want to find a way of doing it that only affects the first letter of the first paragraph. Is there something simple I can tweak to get it working in Firefox? Does Firefox allow ":first-letter" elements on divs?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I want to find a way of doing it that only affects the first letter of the first paragraph. Is there something simple I can tweak to get it working in Firefox? Does Firefox allow ":first-letter" elements on divs?
    That's what you tried in the first place!

    All4nerds other suggestion
    CSS
    Code:
    .big_letter:first-letter { 
      float:left;
      color:#ffaa00;
      font-size:50px; /* smacky no-no */
      line-height:44px;
      padding:2px 5px 0 0;
      font-family: Futura, Times, Georgia;
    }
    Code:
    <div id="entry">
    <p class="big_letter">Bla bla bla</p>
    <p>Bla bla bla</p>
    <p>Bla bla bla</p>
    </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •