tags:

views:

203

answers:

2

Hello guys,

I'm trying to make a numbered list but I'm getting a margin on the top and the bottom between the list and some text (I'm using Firefox). When I try get rid of it with CSS, I loose the numbers and the indentation. Is it possible to get rid of the margin without loosing the numbers and list indentation?

If you use the following html:

<html>
<body>
BIG GAP V
  <ol>
    <li>hello</li>
    <li>there</li>
  </ol>
BIG GAP ^
</body>
</html>

You'll see that you get the following:

BIG GAP V

  1. hello
  2. there
BIG GAP ^

A: 

Try to change just the top and bottom margin:

ol {
    margin-top: 0;
    margin-bottom: 0;
}
Gumbo
Thanks. I just realized I used padding in the CSS instead of margin. Silly me. :(
hatter
@hatter: The padding is just used for the indention.
Gumbo
A: 

Ideally, if you want the best control over the layout of your HTML, you should use a reset CSS such as Eric Meyer's or the one from YUI. This removes any default formatting applied by browsers (which is often different for each browser). You can then apply the formatting (margins, padding etc.) that you want.

Vinay Sajip