for practical use of CSS
copyright © CSSPG, lud October 18 2000
for practical use of CSS
Floating Text Howard Marvel writes:
In my quest to learn css, I came across a new item at webreview by a frequent contributor to this group, Eric Meyer, The url is http://www.webreview.com/97/12/12/style/index.html (1) Meyer claims that IE doesn't do drop caps, because it does not support floating text elements. Since I had done floating text elements in IE, I went back to figure out why his example did not work. Turns out that since I was doing the floating text like a marginal note, I had declared a width for the float. Put in width:1em in Meyer's example, and viola, almost, we have a solution. Use a narrower width and the solution is better.
But then I notice that things are strange. What is this that NS is doing? What happens if I use x-large as a font size instead of 200%? Similar results, except that the drop is too large for NS, IE does better.
Moral, I think: If you want to float some text, it may be best to declare an explicit width when possible.
(1) The style declaration to simulate the unsupported pseudo-element is:
<STYLE type="text/css">
P {font: 12pt serif; color: black;}
.dropcap {font: 200% serif;
color: navy; float: left;
width: 1em; }
</STYLE>
<P>
<SPAN class="dropcap">T</SPAN>his is the first sentence of the paragraph.</P>
CSS Pointers Navigation
Main Site Navigation
