List Problem

Hello,

I am trying to create a list as follows:
1. The items should be inline but the text in each item shouldn't
break from one line to the other;
2. Each item should have margin from the other items around it.

I have the folllowing:

http://www.27lamps.com/Beta/Validator/Validator.html

However, the ul yellow background is not visible. The ul is collapsed.

I tried to replace the "float: left" by "display: inline" but in this
case the text inside a list item breaks from on line to the other.

What is the correct way to do this?

Thanks,
Miguel

In article
<a9b635b8-c5de-405b-a446-92b3e0b6cef0 (AT) o4g2000pra (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

http://www.27lamps.com/Beta/Validator/Validator.html

However, the ul yellow background is not visible. The ul is collapsed.

ul.Validator {overflow: hidden;} is one method.

For IE6, you might need a width (or any height) on ul.Validator.

You can also deliver yellow from this UL's parent:

<div class="Container">

<ul class="Validator">
<li><span>Name is required</span></li>
<li><span>Name must have 200 characters or less</span></li>
<li><span>The birthday is invalid</span></li>
<li><span>User already exists</span></li>
</ul>
<div style="clear: left;"></div>

</div>


There are many ways. But as for the perfectly correct way, don't read
the CSS spec, or me, or anyone except the PhD thesis of Haakon Lie. Then
read The Bible, both old and new testaments, the Torah, the Koran, War
and Peace and every postmodernist writer you can find.

--
dorayme