WEB STANDARDS CREATIVITY

As another elegant piece of insurance that my readers will be immediately drawn to what #main has to say, a drop cap will
suit this page well.
Here are the properties I want my drop cap to include:
The body text should wrap around it.
It should be about six times the size of the text.
The top should be flush with the top of the first line of text.
The left side should remain flush with the text’s left side, but the right and bottom sides should have a small
margin to avoid butting up against the text.
Pseudo-elements in an imperfect world
Since I’m dealing directly with the first letter in my first paragraph (which already has a class of first), using the CSS
:first-letter pseudo-element selector is a logical place to begin. Thus, rules for my drop cap will be addressed to
p.first:first-line, and are easily translated line-for-line from my list of desired properties.
p.first:first-letter {
float: left;
font-size: 6em;
line-height: .75em;
margin-right: .1em;
margin-bottom: .1em;
}
In a rare twist, this code renders with reasonable consistency in all of my tested browsers, except for Firefox for Mac, which
mysteriously inserts extra space at the top and bottom of my drop cap (Figure 7-14). No amount of fiddling with lineheight,
padding, or margin will make it behave consistently across browsers, and if the paragraph begins with an inline
element like an em or strong (or a span, which I’ll be adding later), the results are even more disparate. Sadly, I’ll have to try
a different solution.
Figure 7-14. The Firefox :first-letter bug
chapter 7 Bridging the Type Divide: Classic Typography with CSS
171