Print It
A few things to note on this technique, (not that I can actually think of any logical reason why you'd want to given how this effect has been applied throughout... well history in general) on the off chance someone for some reason I cant think of, wants to use consecutive paragraphs with this drop cap first letter, then you could POTENTIALLY experience some issues (i emphasise potentially as I haven't actually tested this, I'm just making note of this as it came to mind based of past experiences with how browsers (particularly wannabe "browser" IE).
I would imagine that excluding any "damage factors" (see below), standards compliants browsers like Firefox etc, probably wont have any problems, however of course we STILL have to accomodate for that so-called "browser" Internet Exploder (or Exploiter if you prefer they equally underscore just how pathetic IE is), IE is in general pretty retarded when it comes to handling floats (hence the need for the line-height rule), especially with the "damage factors" mentioned before, the damage factors in this situation are:
* Width of
element that contains the drop cap and regular text.
* The amount of text within the
element that follows the drop cap.
* Height declarations on the
element.
* Other unknown variables.
Other unknown variables is just how I refer to anything that's specific to your own site, i.e. you can be 99.99% certain that without even checking I have built my websites different to the way you've built yours, however minor (prime example - IE7 still is subject to the same dumb problem that IE5 has, requiring pointless empty / single whitespace containers or literally a basic HTML comment like ), e.g. other styles that are applied to the elements via cascade from a parent element, etc.
Width, height and text within the
element(s) can all be summed up in one - The first letter is floated, which takes it out the normal document flow, so if you have your
elements with a set width and or height, you could get some issues with the first letter possibly breaking outside the boundaries of its container, particularly when the text size is adjusted through the user's browser menus, the CTRL + Mousewheel combo, etc. The amount of text within the
element will also be a factor depending on how your site works, e.g. if you have your site width based on percentages and you have a paragraph with this text effect, different resolutions will change how many lines the text will require, if the drop cap letter becomes taller than the height of your text in higher resolutions the character might start to break outside its container.
In the event you do get these types of problems then you could also combine this technique with the 21st century clearing from Position is Everything:
p.dropcap:after {
height: 0;
clear: left;
content: ".";
display: block;
visibility: hidden;
}
That'll sort the standards compliant browsers, now we have IE which doesn't do generated content, it does however have an auto clearing feature that kicks in when an element has hasLayout = true. Within an IE stylesheet:
p.dropcap {
display: inline-block;
}
* html p.dropcap {
height: 1px;
}
Star-HTML i imagine is globally recognised as the IE6 and lower hack, the display-inline block does the hasLayout triggering for IE7 (and IE6 as well), however I have experienced some random results with the inline-block display applied to different elements, particularly, if IE7 decides to throw it's toys out the pram with display: inline-block; then swap this out for min-height: 1px;
IEs wrong handling of height was fixed in IE7 so using height: 1px will do more harm than good in IE7, min-height however also triggers has layout and is the same thing as what IE6 and lower do (incorrectly) already.