CSS line spacing

[David Smithz]

Hi there,

I was asked to make a paragraph of text to have 1.5 line spacing on a
website. I noticed (using Dreamweaver) there was a CSS style that allowed me
to set the "Line height" (under the Type category when editing a Style sheet
in Dreamweaver). I set this to 150% (not knowing what some of the other
options were).

Although this had the desired effect in the Dreamweaver screen layout of the
website, when previewing in IE6 or Firefox it did not have the extra line
space.

Anyone know why this is?

Kind regards

Dave

 

[Jonathan N. Little]

Hi there,

I was asked to make a paragraph of text to have 1.5 line spacing on a
website. I noticed (using Dreamweaver) there was a CSS style that allowed me
to set the "Line height" (under the Type category when editing a Style sheet
in Dreamweaver). I set this to 150% (not knowing what some of the other
options were).

Although this had the desired effect in the Dreamweaver screen layout of the
website, when previewing in IE6 or Firefox it did not have the extra line
space.

Anyone know why this is?

In stylesheet for desired element, class, or id:

line-height: 1.5em;
or
line-height: 150%;

should do it, not sure how DW's widget interface implements it though.

 

[David Smithz]

Finally worked out why it was not working for me.

I had the style name beginning with a number! Therefore I had called the
style
..1-5-linespacing.

When I put a letter at the start it worked. I'm suprised Dreamweaver did not
warn me about this, but all is well now.

Thanks for your help.

 

[Jonathan N. Little]

Finally worked out why it was not working for me.

I had the style name beginning with a number! Therefore I had called the
style
.1-5-linespacing.

When I put a letter at the start it worked. I'm suprised Dreamweaver did not
warn me about this, but all is well now.

I am afraid nothing can substitute for knowing the spec.

http://www.w3.org/TR/CSS21/cover.html

DW as with any of WYSIWYG editors are really not good for the novices,
they keep you blissfully ignorant of the rules and promote bad habits
and poor markup (but they can do it really fast and easy!). They can
become a crutch. They can be a useful tool in skilled hands, personally
I prefer to hand code. I advise one to master hand-coding, learn to do
it correctly, then if you wish use a WYSIWYG editor.

 

[David Smithz]

I am afraid nothing can substitute for knowing the spec.

http://www.w3.org/TR/CSS21/cover.html

DW as with any of WYSIWYG editors are really not good for the novices,
they keep you blissfully ignorant of the rules and promote bad habits and
poor markup (but they can do it really fast and easy!). They can become a
crutch. They can be a useful tool in skilled hands, personally I prefer to
hand code. I advise one to master hand-coding, learn to do it correctly,
then if you wish use a WYSIWYG editor.

I would love to know all this stuff inside, but I guess it's a trade off of
how much time one has to how much one will be using it.

Just out of interest, is the CSS 2 standard currently supported but the
latest browsers. So if I do invest the time reading this and learning it,
can I apply what I learn right now? (therefore does IE6 and firefox support
this).

I wish I had more time to read all the things I wanted to learn about.

Cheers for your input.

 

[Chris Beall]

I would love to know all this stuff inside, but I guess it's a trade off of
how much time one has to how much one will be using it.

Just out of interest, is the CSS 2 standard currently supported but the
latest browsers. So if I do invest the time reading this and learning it,
can I apply what I learn right now? (therefore does IE6 and firefox support
this).

I wish I had more time to read all the things I wanted to learn about.

Cheers for your input.

David,

Support varies, but I would rate Firefox and Opera and Safari as good,
with IE 6 as fair, provided you use an HTML Strict DOCTYPE. There are
some parts of the spec that nobody seems to support. Don't fall in love
with a concept until you've tried it out. Example: the :hover
pseudo-class is defined for all elements, but IE 6 supports it only for
links. In some cases (not this one), there are easy workarounds.

Yes, if you learn CSS 2.1, you can apply it now. Just not ALL of it...

Chris Beall

 

[Jukka K. Korpela]

line-height: 1.5em;
or
line-height: 150%;

line-height: 1.5
is possible, too, and actually works better when you have font size
variation inside the block. This is a long story, and I won't go into
details here, but read about line-height in a good book on CSS.

(You will probably also realize that you need to tell the person who
asked for 1.5 spacing that he doesn't understand the issue. There might
be special cases where 1.5 is OK, but for the most of it, it is too
much.)

 

[Jonathan N. Little]

line-height: 1.5
is possible, too,

Yes I am aware this in one of the few unit-less values for a CSS
property, I guess basically a ratio value. I chose not to because so
many newbe's 'forget' the units in other CSS properties where it is
required that I did not want to confuse the issue.

and actually works better when you have font size
variation inside the block. This is a long story, and I won't go into
details here, but read about line-height in a good book on CSS.

Any online source where this advantage is discussed?

(You will probably also realize that you need to tell the person who
asked for 1.5 spacing that he doesn't understand the issue. There might
be special cases where 1.5 is OK, but for the most of it, it is too
much.)

I can have a the effect of 'lightening' your text blocks and giving a
softer feel to your page with a plain old san-serif font without
resorting to an obscure face like Bernard Fashion than many folks would
not have. But yes I agree with you.