CSS and lists

[sachaburnett]

Hi all!

I'm just learning html and css coding and would like to know if it's
possible to add an additional blank line in between each list element
in css... or do I have to put a manual line break (ie., a br tag) after
each list element.

I tried using "line-height" but that would change the line height of
wrapped text as well. D'oh!

Thanks guys!

Sacha

 

[Jonathan N. Little]

Hi all!

I'm just learning html and css coding and would like to know if it's
possible to add an additional blank line in between each list element
in css... or do I have to put a manual line break (ie., a br tag) after
each list element.

I tried using "line-height" but that would change the line height of
wrapped text as well. D'oh!

Thanks guys!

Change the margin-top and margin-bottom of the LI, try 2em and see what
happens!

 

[Andy Dingley]

I'm just learning html and css coding and would like to know if it's
possible to add an additional blank line

Don't (EVER !) "add blank lines". Instead take the break you already
have and make it render into a larger size.

Adjust the margin-top and margin-bottom properties of <li>

You _might_ change padding-top and padding-bottom too, if you understand
the CSS box model. Try changing the background colour on <li> first and
seeing what effect these changes have.

Be aware that the default stylesheet for <ul><li> is different between
browsers. Some space the lists with margins, some with padding. If you
want to change these values consistently across browsers, set all of
them (even if you set most to 0).

 

[ironcorona]

Be aware that the default stylesheet for <ul><li> is different between
browsers. Some space the lists with margins, some with padding.

Thanks, this is good to know. I just assumed they were all alike but
IE'll catch ya every time.

Is using the <ul> margin to indent the lists just an IE thing? Is there
anywhere that states what UA's should be doing? [I don't know weather
this is a CSS or an HTML issue.]

On top of IE I only have FF 1.5.0.3 and Opera (9 beta). FF and Opera
use <ul> padding to indent the <li>'s.

 

[Jukka K. Korpela]

Is using the <ul> margin to indent the lists just an IE thing?

Hardly. But does it matter?

Is there anywhere that states what UA's should be doing?
No.

[I don't know
weather this is a CSS or an HTML issue.]

It's neither. The HTML specs don't say that lists must be indented, still
less how that should be implemented. The CSS specs do not specify any
requirements on a browser's default style sheet.

What comes closest are the "sample style sheets for HTML" in CSS specs. They
are claimed to document existing browser practice - which is largely an
incorrect statement - and they are also presented as "suggested" default
style sheets. In practice, nobody takes them very seriously. Anyway, CSS
2.0 and the CSS 2.1 draft have
ul { margin-left: 40px; }
which is of course poor policy (using the em unit would be better).

CSS 1 is an improvement over its successors, in setting the value in em
units, but it also sets the indentation by setting left margin for list
items, not the list as a whole:
li { margin-left: 3em; }

Anyway, if you try to set the indentation of lists, you should explicitly
set both left-margin and left-padding, for both the list and for the list
items.