4 replies [Last post]
edalzell
Offline
newbie
Last seen: 17 years 14 weeks ago
Joined: 2003-10-20
Posts: 2
Points: 0

I am having some difficulty getting the first letter in my blog to be a drop cap.

I think this:
div:first-child p : first-letter {
...relevant CSS here
}

should work, but it doesn't.

Any ideas?

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

First letter as drop cap

You can read about drop caps using CSS in the following sites:

using floats
using span class

Hope this helps.

edalzell
Offline
newbie
Last seen: 17 years 14 weeks ago
Joined: 2003-10-20
Posts: 2
Points: 0

First letter as drop cap

My problem is that in my blog, I only get so much control over content. For example, the whole entry goes in the %%body%% tag. So the best I can do is surrount that tag with a div tag.

So I get:
<div="foo">
<p>para one</p>
<p>para two</p>
<p>para three</p>
</div>

I don't have the ability to wrap the first paragraph in a tag. So I want to isolate the first-letter of the first-child. I can get the first-child and apply a style to the whole first paragraph, but I can't get the first letter of that paragraph.

Very frustrating.

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

First letter as drop cap

The :first-child pseudoclass is not supported by all browsers. This is presented in here and here. IE/Win does not support it. For Mozilla / Moz Firebird, it worked. I tried the following:.foo p:first-child:first-letter { /* transformation here */ }

I just dont know if subclassing it like that is according to standard. BTW, IE would only recognize the :first-letter, thereby making the paragraphs within the div to have drop capped first letters.

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 17 years 29 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Sorry for jumping in here...

When I use something like this: p::first-letter {float: left; font-size: 400%; font-weight: bold; color:#0066cc; } . The drop letter ends up overlapping the first word in the second line. Is there a way to prevent this? I was expecting the float: left; to do away with the overlap. Padding doens't help as well... any ideas?

When I first viewed the page, it worked, but afterwards nothing I did to the CSS would get it to look right.

[UPDATE]: N/M, I added line-height: 20px and that seems to have worked...

"What I had, I gave today. What I saved, I lost forever."