"first-letter" working in Safari but not Firefox

[supertrue22]

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>

[supertrue22]

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?

[supertrue22]

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?

[markbrown4]

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

.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;
}

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