1. Home
  2. Forums Index
  3. Browser Side / CSS 5:17 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

large bold first paragraph character line spacing problem.

         

wkitty42

9:36 pm on Mar 25, 2010 (gmt 0)

10+ Year Member



first off, it has been many years since i was active here... the last time i was really here i was working on a 3 column layout for my site but that then got morphed to a simple menu on the left and everything else on the right... that was... ummm... before 9/11 came along, IIRC...

anyway, this one is real simple, i hope... i'll probably still need to break out something for example and troubleshooting but i thought that asking this first might save some time...

the problem is quite simple... using this CSS 

div.block-text {
margin-left: auto;
margin-right: auto;
padding: none;
font-style: normal;
font-size: 1em;
border-style: none;
}
div.block-text:first-letter {
font-weight: bold;
font-size: 3em;
}


i get a larger space between the first line and the second line... it looks to be about .5x larger than normal... those in the typographical and printing business would say that kerning or such needs to be adjusted... i dunno... the effect is not a "drop cap" but a "larger and raised cap"... the bottom of the first letter is still at the bottom of the other characters in the line... i don't see any reason why there would be any additional spacing below the line with the large first character on it...

drhowarddrfine

11:37 pm on Mar 25, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Add 'float:left' to the first-letter part. I can't remember the details on how margin/padding affects this.

wkitty42

1:59 am on Mar 26, 2010 (gmt 0)

10+ Year Member



i've done the "float: left" thing but it hasn't helped with what i've got... that was one of the things in the "drop caps" stuff but going that way gave me even larger margins around and moved the first-letter cap lower in the groove plus placed the additional margining stuff on the second and third lines :? :(

drhowarddrfine

3:40 am on Mar 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



None of that should happen so there must be some surrounding markup affecting it. Which browser are you seeing this in?

wkitty42

12:25 am on Mar 27, 2010 (gmt 0)

10+ Year Member



all of them, really... i've tested with FF 3.6.2, the latest IE 7 and 8 and even the last IE 6 (which required the use of a css-reset sheet and then a special sheet for IE 6 and less)... even opera 10.51 shows it... i don't have safari or google's browser handy but i'd bet they would should it as well :? :(

maybe i should post my current css file?

or actually, i probably really should take the time to strip and build back up for an example to see if and when it appears...

rainborick

3:16 pm on Mar 27, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I use the line-height instruction to the :first-letter settings for this problem. I also use the same size as the font size for the balance of the parent block and it seems to work nicely in MSIE and Firefox. Add a float:left if you want the letter to drop. Leave it out if you want the letter to remain on the same baseline as the rest of the top line of text.

wkitty42

7:07 pm on Mar 30, 2010 (gmt 0)

10+ Year Member



ok... here's the source for a basic test page that shows the problem i'm seeing... 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Large First Character Test</title>
<style type="text/css">
<!--
div.lfc:first-letter {
font-weight: bold;
font-size: 3em;
margin-bottom: 0px;
}
-->
</style>
</head>
<body lang="en-US" dir="ltr">
<div class="lfc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a auctor mauris. Nunc bibendum interdum
ligula, ac pellentesque massa pulvinar at. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Cras eget mollis ante. Aliquam tincidunt, lacus in convallis
gravida, lacus orci aliquam sem, a tristique metus tellus et nisl. Suspendisse justo dui, pharetra
nec feugiat in, iaculis ut tortor. Etiam libero nibh, condimentum gravida aliquam nec, bibendum
vitae enim. Vivamus sem sem, dignissim id euismod at, feugiat et arcu. Suspendisse potenti. Integer
fermentum pellentesque ipsum eu dapibus. Nulla a ante turpis, quis interdum nibh. Phasellus metus
purus, accumsan eu consectetur non, ullamcorper sed augue. Ut in augue eu nisi laoreet dignissim id
ac augue. Maecenas facilisis mi in ipsum commodo mattis.
</div>
</body>
</html>

wkitty42

7:12 pm on Mar 30, 2010 (gmt 0)

10+ Year Member



I use the line-height instruction to the :first-letter settings for this problem. I also use the same size as the font size for the balance of the parent block and it seems to work nicely in MSIE and Firefox.

i'm lost... i've tried the line-height option but obviously don't do something right for a liquid layout (using em instead of px and such)...

Add a float:left if you want the letter to drop. Leave it out if you want the letter to remain on the same baseline as the rest of the top line of text.

yeah... i want it to stay on the same baseline... i have attempted to do the dropcap thing but then ran into the problem of the letter dropping but not staying aligned to the top of the first line and actually taking up more than two lines kinda like an image floating left with lines wrapped up to it... i gave up on that real quick...

wkitty42

7:15 pm on Mar 30, 2010 (gmt 0)

10+ Year Member



oops... i forgot to remove the margin-bottom entry in the css and can't edit my post :(

even without it, the problem still appears...

wkitty42

9:32 pm on Mar 30, 2010 (gmt 0)

10+ Year Member



alriiight... i think i got it now... here's another test page that works as desired...

the answer was line-height as pointed to by rainborick... it just needed to be applied to the encompassing container div's settings and not to the first-letter settings... thanks!

this code also contains a little more css for asthetics ;)

===== 8< ===== 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Large First Character Test</title>
<style type="text/css">
<!--
div {
margin-left: auto;
margin-top: 0em;
margin-right: auto;
margin-bottom: 0.75em;
padding: none;
font-style: normal;
font-size: 1.0em;
line-height: 1.2em;
}
div.lfc:first-letter {
font-weight: bold;
font-size: 2.0em;
}
-->
</style>
</head>
<body lang="en-US" dir="ltr">
<div class="lfc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a auctor mauris. Nunc bibendum interdum
ligula, ac pellentesque massa pulvinar at. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Cras eget mollis ante. Aliquam tincidunt, lacus in convallis
gravida, lacus orci aliquam sem, a tristique metus tellus et nisl. Suspendisse justo dui, pharetra
nec feugiat in, iaculis ut tortor. Etiam libero nibh, condimentum gravida aliquam nec, bibendum
vitae enim. Vivamus sem sem, dignissim id euismod at, feugiat et arcu. Suspendisse potenti. Integer
fermentum pellentesque ipsum eu dapibus. Nulla a ante turpis, quis interdum nibh. Phasellus metus
purus, accumsan eu consectetur non, ullamcorper sed augue. Ut in augue eu nisi laoreet dignissim id
ac augue. Maecenas facilisis mi in ipsum commodo mattis.
</div>
<div class="lfc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a auctor mauris. Nunc bibendum interdum
ligula, ac pellentesque massa pulvinar at. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Cras eget mollis ante. Aliquam tincidunt, lacus in convallis
gravida, lacus orci aliquam sem, a tristique metus tellus et nisl. Suspendisse justo dui, pharetra
nec feugiat in, iaculis ut tortor. Etiam libero nibh, condimentum gravida aliquam nec, bibendum
vitae enim. Vivamus sem sem, dignissim id euismod at, feugiat et arcu. Suspendisse potenti. Integer
fermentum pellentesque ipsum eu dapibus. Nulla a ante turpis, quis interdum nibh. Phasellus metus
purus, accumsan eu consectetur non, ullamcorper sed augue. Ut in augue eu nisi laoreet dignissim id
ac augue. Maecenas facilisis mi in ipsum commodo mattis.
</div>
<div class="lfc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a auctor mauris. Nunc bibendum interdum
ligula, ac pellentesque massa pulvinar at. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Cras eget mollis ante. Aliquam tincidunt, lacus in convallis
gravida, lacus orci aliquam sem, a tristique metus tellus et nisl. Suspendisse justo dui, pharetra
nec feugiat in, iaculis ut tortor. Etiam libero nibh, condimentum gravida aliquam nec, bibendum
vitae enim. Vivamus sem sem, dignissim id euismod at, feugiat et arcu. Suspendisse potenti. Integer
fermentum pellentesque ipsum eu dapibus. Nulla a ante turpis, quis interdum nibh. Phasellus metus
purus, accumsan eu consectetur non, ullamcorper sed augue. Ut in augue eu nisi laoreet dignissim id
ac augue. Maecenas facilisis mi in ipsum commodo mattis.
</div>
</body>
</html>
===== 8< =====
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:17 pm May 1, 2026