3 replies [Last post]
Someberry
Offline
newbie
Last seen: 15 years 15 weeks ago
Joined: 2005-08-17
Posts: 3
Points: 0

Whenever I use ol's or ul's, they seem to be really spaced out. I have tried giving them a class of their own (<ol class="unique_class_name">) but I still seem to get the same results - even if I put items styles like padding and margin into the negatives.

They tend to look like this:

1. Test

2. Test

3. Test

Instead of:

1. Test
2. Test
3. Test

Does anyone know what style might be causing such a big gap, and if so, how I can counteract it?

Thanks,
Someberry.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[SOLVED] list problems

Without seeing your markup, its difficult to be exact. Most block elements come with a standard browser setting that includes some top and bottom margins (1em, except for the largest headers which are probably a little smaller than that).

If your list is a basic one...

<ol>
  <li>...</li>
  <li>...</li>
  ...
  <li>...</li>
</ol>

then style it ...

ol {margin: 1em 0; padding: 0 0 0 2em;}
li  {margin: 0; padding: 0;}

That will provide some spacing around the list, but no spacing between list elements. The 2em is a left indent. Change the values to suit your design.

Another possible cause of large line spacing is the line-height. Ensure that is set to normal (or around 1.2 - 1.4em).

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 24 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

[SOLVED] list problems

And your solution was for others that might be reading this post facing the same problem?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[SOLVED] list problems

/edit .... obviously too long spent typing again. :?