Simple CSS Help (I think)

Question

Hey Gang,
I'm making a pretty straight forward Horintal List using
Display: Inline.
Done it a bunch of times using an unordered list, but this
time, I need an
ordered list (need to show the numbers).
For some reason, when I apply the inline style, the numbers
dissappear.
I'm hoping I'm just missing a step, would someone mind having
a peek at this
short code?
Everything lays out fine, I just need the numbers to show.
Thaks
-Dave
#MovesNav ol {
Margin: 0px;
Padding: 0px;
font: 10px Verdana;
#MovesNav li {
Margin: 0px 10px 0px 0px;
display: inline;
<div id="MovesNav">
<ol>
<li><a href="#">The Jab</a></li>
<li><a href="#">The Cross</a></li>
<li><a href="#">The Hook</a></li>
<li><a href="#">The
Uppercut</a></li>
<li><a href="#">Front Contraction
Kicks</a></li>
<li><a href="#">Roundhouse
Kicks</a></li>
<li><a href="#">Side Contraction
Kicks</a></li>
<li><a href="#">The Back
Kick</a></li>
</ol>
</div>

Answer 1

that did it.. thanks much!!
#MovesNav a {
font: 12px Verdana;
margin-right: 10px;
white-space: nowrap;
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> Go back to the solution I supplied using the ol/li tag
and add this to the
> li css:
>
> white-space: nowrap;
>
>
> or you could try adding it to the 'a' tag in your
version.
>
>
>
>
>
> Dave Bar wrote:
>
>> Thaks for the quick reply.
>>
>> I went a similiar route with manually entering the
numbers, but dropped
>> the lists and did it all through the anchor tag
>>
>> Here's a followup question for both the LI and the
Anchor method.
>> Is there a way to keep the contents of an anchor tag
from breaking to a
>> second line when running out of space.
>>
>> Like when the end of the Dic tag is just before 3
>> this is one - this is two - this is
>> three
>>
>> It would be cool if the entire line withni the
anchor would go to the
>> next line
>> this is one - this is two -
>> this is three
>> Is that possible?
>>
>> Here's the code using just anchors:
>> #MovesNav a {font: 12px Verdana; margin-right:
10px;}
>> #MovesNav a:link, a:visited, a:active {color:
#000000;
>> text-decoration:underline;}
>> #MovesNav a:hover{color:#0033CC;
text-decoration:underline;}
>>
>> <div id="MovesNav">
>> <a href="#">1. The Jab</a>
>> <a href="#">2. The Cross</a>
>> <a href="#">3. The Hook</a>
>> <a href="#">4. The Uppercut</a>
>> <a href="#">5. Front Contraction
Kicks</a>
>> <a href="#">6. Roundhouse Kicks</a>
>> <a href="#">7. Side Contraction
Kicks</a>
>> <a href="#">8. The Back Kick</a>
>> </div>
>>
>> Thanks Again
>> -Dave
>>
>> "Osgood" <[email protected]>
wrote in message
>> news:[email protected]...
>>
>>>Try wrapping the numbers in a <span> tag
(see code below) then giving the
>>>span some right padding using css.
>>>
>>>span {
>>>padding-right: 4px;
>>>}
>>>
>>>
>>><div id="MovesNav">
>>> <ol>
>>> <li><a
href="#"><span>1</span>The Jab</a></li>
>>> <li><a
href="#"><span>2</span>The
Cross</a></li>
>>> <li><a
href="#"><span>3</span>The Hook</a></li>
>>> <li><a
href="#"><span>4</span>The
Uppercut</a></li>
>>> <li><a
href="#"><span>5</span>Front Contraction
Kicks</a></li>
>>> <li><a
href="#"><span>6</span>Roundhouse
Kicks</a></li>
>>> <li><a
href="#"><span>7</span>Side Contraction
Kicks</a></li>
>>> <li><a
href="#"><span>8</span>The Back
Kick</a></li>
>>> </ol>
>>> </div>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>Dave Bar wrote:
>>>
>>>
>>>>Hey Gang,
>>>>
>>>>I'm making a pretty straight forward Horintal
List using Display:
>>>>Inline.
>>>>
>>>>Done it a bunch of times using an unordered
list, but this time, I need
>>>>an ordered list (need to show the numbers).
>>>
>>>>For some reason, when I apply the inline
style, the numbers dissappear.
>>>>I'm hoping I'm just missing a step, would
someone mind having a peek at
>>>>this short code?
>>>>
>>>>Everything lays out fine, I just need the
numbers to show.
>>>>Thaks
>>>>-Dave
>>>>
>>>>#MovesNav ol {
>>>> Margin: 0px;
>>>> Padding: 0px;
>>>> font: 10px Verdana;
>>>>}
>>>>#MovesNav li {
>>>> Margin: 0px 10px 0px 0px;
>>>> display: inline;
>>>>}
>>>>
>>>><div id="MovesNav">
>>>> <ol>
>>>> <li><a href="#">The
Jab</a></li>
>>>> <li><a href="#">The
Cross</a></li>
>>>> <li><a href="#">The
Hook</a></li>
>>>> <li><a href="#">The
Uppercut</a></li>
>>>> <li><a href="#">Front
Contraction Kicks</a></li>
>>>> <li><a href="#">Roundhouse
Kicks</a></li>
>>>> <li><a href="#">Side Contraction
Kicks</a></li>
>>>> <li><a href="#">The Back
Kick</a></li>
>>>> </ol>
>>>> </div>
>>>
>>
>>
>