CSS Table is stretching text.

[Rayzorblades]

Hey all, newbie to the forum here. I've been working on a page for my Ma based on a template that I've tinkered with a bit. The trouble is that when I make the center column longer, it stretches out the width of the lines of text within the column so that they look double and triple spaced.

My question is, how do I make the center column long enough to fill the screen but not stretch my paragraphs to heck. This is the code for it:

/*Centre Column*/

#maincol {
float: left;
display:inline;
position: relative;
width:32.5%;
border-right: 1px solid #8A795D;
border-left: 1px solid #8A795D;
line-height: 1.8em; <----This is the value I changed*
background: #333;
color:#ccc;
}
#maincol a:link, #maincol a:visited {
text-decoration : none;
background : inherit;
color : #ccc;
}
#maincol a:hover {
text-decoration : none;
background : inherit;
color : #666;
}


*When I make the line height longer it fills the screen but the text does the double space effect I mentioned. Any help would be appreciated.

 

[jnjc]

Can you post a link to the page so we can see the issue ?

 

[Rayzorblades]

http://www.brenfisher.com/achieveleadership/

I put the style sheets back to the messed up way until tomorrow.

 

[jnjc]

line-height: 1.8em; <----This is the value I changed*

Which is exactly what caused the problem. Remove this line altogether and replace it with:

height:1015px;

And you should be good.
line-height specifies the actual height each line of text is going to be.



I noticed a couple of other things about the center column:

After each </li> you have a <br/> tag to provide spacing. It would be better to put a margin-bottom value for the li in you style sheet and remove the <br/>

You should probably look at specifying margin-left and right on the <li> tags to space the text better.

HTH,
JC

 

[abwebdesign]

As you have aptly noted, changing the line-height property will modify the spacing between lines and can give you that "double-spaced" look. So for example, line-height: 2em; would give you exactly doubled-spacing. I suggest trying some variations, e.g., 1.7, 1.6, 1.5, etc. in order to get the look you want

I believe you may want to try text-align: justify;, as that will help fill the page from left-to-right as well.

 

[Rayzorblades]

Awesome thanks so much!