Mon, 2003-10-20 05:20
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?
Mon, 2003-10-20 06:26
#1
First letter as drop cap
You can read about drop caps using CSS in the following sites:
Hope this helps.
Mon, 2003-10-20 06:32
#2
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.
Mon, 2003-10-20 07:28
#3
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.
Tue, 2004-01-06 10:13
#4
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...