Help with Ordered Lists

What I am trying to acomplish is to change the font size and color of the numbers for an OL. And the <li> to have a different font and size. I am testing on PC, FF and IE6. On Mac Safari and FF. FF and IE show a bigger gap between the last two lines. I wanted to know if there is a way to get rid of that gap.

Here's the CSS

ol#numbered{
color: rgb(153, 153, 153);
display: block;
font-family: Arial;
font-size: 20px;
list-style-position: outside;
list-style-type: decimal;
padding-left: 50px;
width: auto;
}
.list{
font-size: 12px;
color: #4b4d44;
line-height: 18px;
}


And now the HTML

<ol id="numbered">
<li><span class="list">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tincidunt posuere dui. Aenean tristique magna sed mi. In hac habitasse platea dictumst. Sed turpis neque, elementum sed, blandit id, posuere quis, neque. Morbi volutpat sollicitudin ipsum. Quisque ullamcorper, libero eu luctus sodales, risus neque interdum massa,</span></li>
<li><span class="list">perdiet. Donec pulvinar tellus. Cras rhoncus tristique tortor. Integer lectus orci, convallis feugiat, ullamcorper eu, scelerisque nec, nisl. Vestibulum suscipit, lacus vel cursus adipiscing, odio dolor tincidunt est, quis tempor magna arcu ut libero. </span></li>
<li> <span class="list">i. Nullam fermentum. Ut augue risus, iaculis vel, tincidunt ut, volutpat vitae, lacus. Nullam aliquam, turpis at mollis volutpat, tellus eros rutrum lorem, sit amet elementum diam mauris vitae metus. Cras eleifend dignissim sapien. Vestibulum eros nisi, venena </span></li>

<li><span class="list">Ut eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id purus. Cras in elit. Maecenas ac lacus quis orci consectetuer suscipit. Ut porta lacus eu enim. Ut euismod felis id ligula. Phasellus est augue, hendrerit sodales, euismod.</span> </li>
</ol>

maybe instead of using an auto-width, try an approximate ammount

Hello jojobeth1,
I thought maybe adding *{margin:0;padding:0;} to your CSS would stop the extra space but it didn't. It looks like it's your use of span tags that do it though, if you put the class directly on the li the space doesn't happen.
Like this:<ol id="numbered">
<li class="list">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tincidunt posuere dui. Aenean tristique magna sed mi. In hac habitasse platea dictumst. Sed turpis neque, elementum sed, blandit id, posuere quis, neque. Morbi volutpat sollicitudin ipsum. Quisque ullamcorper, libero eu luctus sodales, risus neque interdum massa,</li><li><span class="list">perdiet. Donec pulvinar tellus. Cras rhoncus tristique tortor. Integer lectus orci, convallis feugiat, ullamcorper eu, scelerisque nec, nisl. Vestibulum suscipit, lacus vel cursus adipiscing, odio dolor tincidunt est, quis tempor magna arcu ut libero. </span></li>
<li> <span class="list">i. Nullam fermentum. Ut augue risus, iaculis vel, tincidunt ut, volutpat vitae, lacus. Nullam aliquam, turpis at mollis volutpat, tellus eros rutrum lorem, sit amet elementum diam mauris vitae metus. Cras eleifend dignissim sapien. Vestibulum eros nisi, venena </span></li>

<li><span class="list">Ut eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id purus. Cras in elit. Maecenas ac lacus quis orci consectetuer suscipit. Ut porta lacus eu enim. Ut euismod felis id ligula. Phasellus est augue, hendrerit sodales, euismod.</span> </li>
</ol>

I think it's because the browser automatically took a line height from the preceeding font-size--therefore the li itself is ~30px high.

You shouldn't bother with the spans anyway--just use the selector #numbered li.