homepage Welcome to WebmasterWorld Guest from 54.204.73.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
large bold first paragraph character line spacing problem.
wkitty42

10+ Year Member



 
Msg#: 4104767 posted 9:36 pm on Mar 25, 2010 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4104767 posted 11:37 pm on Mar 25, 2010 (gmt 0)

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

wkitty42

10+ Year Member



 
Msg#: 4104767 posted 1:59 am on Mar 26, 2010 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4104767 posted 3:40 am on Mar 26, 2010 (gmt 0)

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

wkitty42

10+ Year Member



 
Msg#: 4104767 posted 12:25 am on Mar 27, 2010 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4104767 posted 3:16 pm on Mar 27, 2010 (gmt 0)

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

10+ Year Member



 
Msg#: 4104767 posted 7:07 pm on Mar 30, 2010 (gmt 0)

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

10+ Year Member



 
Msg#: 4104767 posted 7:12 pm on Mar 30, 2010 (gmt 0)

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

10+ Year Member



 
Msg#: 4104767 posted 7:15 pm on Mar 30, 2010 (gmt 0)

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

10+ Year Member



 
Msg#: 4104767 posted 9:32 pm on Mar 30, 2010 (gmt 0)

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< =====
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved