Ye olde CSS question

Forum Moderators: not2easy

Message Too Old, No Replies

Ye olde CSS question

Can I make the first letter in each 'chapter' different with CSS

Receptional Andy

12:11 pm on Mar 9, 2003 (gmt 0)

Not sure of the name for it, but in many (usually old) books the first letter of each chapter is written in a larger and more decorative font.

Is it possible to achieve a similar effect using CSS?

Nick_W

12:13 pm on Mar 9, 2003 (gmt 0)

Sure is, here ya go:
[w3c.org...]

Nick

Receptional Andy

12:27 pm on Mar 9, 2003 (gmt 0)

Thanks for the link Nick.
I tried this example:

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>

But this displays pretty erratically in IE. Seems to work a little better in Netscape.
I'm not quite sure if I understand the pseudo element thing...

Final question: can I apply this style to an existing paragraph with just standard <p> </p> tags, or can I only use this by adding span/p:firstletter?

Any help is greatly appreciated.

Receptional Andy

12:34 pm on Mar 9, 2003 (gmt 0)

Kind of answered my own question. Simplified above example to this:

<STYLE TYPE="text/css">
P:first-letter { font-size: 200%; float: left }
</STYLE>
<P>The first few words of an article in The Economist.</P>

Which displays nicely in Moz, but has no effect in IE. From what i'm reading the firstletter pseudo element should be supported in IE. Am I doing something wrong here?

[added] The horror! I discovered I was running IE5.00, hence my display problems with first-letter in IE. One (amazingly quick!) install process later, everything working fine[/added]