WEB STANDARDS CREATIVITY

174
My float and margins are intact from the previous example,
my text is negatively indented to another galaxy, and
the values for width and height correspond to the width
and height of my versal graphic. It looks great in all of the
browsers I’m testing, except for Internet Explorer. That
browser has chosen to negatively indent my entire paragraph
instead of just my span, causing the paragraph to
completely disappear (Figure 7-17).
Figure 7-17. Internet Explorer text-indent bug
Luckily, this problem is cleared up by simply declaring the
span to be a block-level element:
.drop {
width: 83px;
height: 83px;
display: block;
float: left;
text-indent: -9999px;
background-image: url(o.gif);
background-repeat: no-repeat;
background-position: top left;
margin-right: .1em;
margin-bottom: .1em;
}
My custom-made drop cap is now in place (Figure 7-18)!
Figure 7-18. My gleaming drop cap