Hey Guys,

I know you can specify the line heights by using "line-height: 20px;" but is there a way you can specify the hight of paragraphs using CSS?

Cheers guys & Gals.

No, you cannot specify paragraph heights. You''ll have to use line-height.

You could but much more importantly you shouldn't.

p {
     height:  60px;
     overflow:  hidden;
}

Doing so will create paragraphs 60 pixels high and only 60 pixels high. The problem with this method is that content that goes beyond this boundary cannot be seen; if either you put in a long block of text or your user enlarges his/her text sufficiently, your text won't be read.

overflow: auto could be used as well, but that creates scrollbars and that's just messy.

Why do you need your paragraph tag to be a specific height, anyway? Sounds like you're trying to be pixel perfect in an environment that won't allow for it.

Good point Adam. I don't think I"ve ever even tried such a thing, there's just never been a need

I have never tried it on purpose either, LNR. It was part of an accidental WordPress discovery (man, does that thing bastardize code sometimes.)

hi guys, thanks for all the comments. the reason im asking is if you look at my new website at http://swiftmed.swiftmediauk.co.uk/website-design.php i am totally happy with the line height, however, the paragraps look really small, as if its just another line....what do you guys think? or is it just in my head?

It's your font size. It's about 0.1em too small (and too light). It's difficult to read as a result. The line height itself is okay.

thanks for your reply again adam, if you dont mind me asking, would you mind changing the following variables to what you would recommend using on my site please. this is the CSS entry for my text.

.page-content {
padding: 0px 4px 3px 3px;
color: #666666;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 20px;
text-decoration: none;
}

.page-content {
padding: 0px 4px 3px 3px;
color: #666666;
font-size: 70%; (slightly larger would be better)
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.25em;
text-decoration: none;
}

It is best NOT to use PX sizes for text or line height. If you use PX, then IE users cannot re-size text should they choose to. Use percentages and/or em's instead.

Base text size for browser is 1em = 16px = 100%. So, to get 10px, divide 10/16 = .625%

Thankyou LadyInRed, i appreciate your advice. i ended up using the following:

}
.page-content {
padding: 0px 4px 3px 3px;
color: #666666;
font-size: 98%;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.90em;
text-decoration: none;

what do you think of the outcome - http://swiftmed.swiftmediauk.co.uk/website-design.php - any better?

I'm still seeing 10px font sizes
It's also good to specify a base font size in your body declarations;

body{font-size: 100.1%}

or something like that.

hiya,

yes i need to go round and change all my css definitions for different parts of the site and the menu etc, but do you think the main content on that page is much better sizes etc, or do you still feel its hard to read etc?

Easier to read, yes. But just as a tip, you need to catch your visitors attention and when I look at your page I don't know where to look or begin. Try making the text a little darker or something...

Originally Posted by Phaaze

Easier to read, yes. But just as a tip, you need to catch your visitors attention and when I look at your page I don't know where to look or begin. Try making the text a little darker or something...

Thankyou for your message Phaaze,

That is the impression i was also getting from my own website, and i think that is exactly what prompted me to ask for your guys advice. I have just done what you recommended and changed the colour of the text which now makes it a lot darker....do you think that makes a difference?

Also, can you recommend anything else i can change to make my site better / enhance it?

thanks for your advice in advance.

That's much better (assuming you mean the body copy). Now just apply the text change everywhere else and you're set.

Originally Posted by ADAM Web Design

That's much better (assuming you mean the body copy). Now just apply the text change everywhere else and you're set.

Agreed. Although there is one thing bugging the heck out of me.. The dark blue text on the header navigation rollover images... Why is the blue text so dark, doesn't match the rest of your site at all...

Originally Posted by Phaaze

Agreed. Although there is one thing bugging the heck out of me.. The dark blue text on the header navigation rollover images... Why is the blue text so dark, doesn't match the rest of your site at all...

Phaaze, could you please tell me where exactly you are talking about, because the only colour blue in my roll-over's are a light "sky blue" which are the same colour as the background to the site.