Issue with lists

List items appearing on the same line

[CWonder]

Hi all,

I am having a fairly large issue with my list items. My list items are appearing on seperate lines which I do want except if a list item is short enough to fit another list item then it will fit another list item on the line. The page can be viewed at <snip>. I thought list items are block level? So i'm not entirely sure why I am having this issue. If anyone can shed some light on my problems it would be greatly appreciated.

Thanks for your time,
Cam

[edited by: engine at 9:44 am (utc) on May 17, 2010]
[edit reason] See CSS charter [/edit]

[birdbrain]

Hi there CWonder,

and a warm welcome to these forums. ;)

Add the highlighted attribute here...

<h4>Services offered are as followed:</h4>
<ul [red]id="services"[/red]>
<li>Complete web site(layout, logo and scripting)</li>
<li>Search Engine Optimization</li>
<li>Web Hosting</li>
<li>CSS scripting</li>
<li>HTML scripting</li>
<li>Javascript scripting</li>
<li>Php programming</li>
<li>Ajax</li>
<li>Payment systems design / implementation</li>
<li>Shopping cart design / implementation</li>
<li>Cms design / implementation</li>
<li>hi</li>
<li>hi</li>
</ul>
<div class="clear">

...then add this rule to your style sheet...

[blue]
#services li{
 float:none;
 text-align:left;
 }

[/blue]

birdbrain

[CWonder]

Thank you very much for your help, i ended up adding

ul
{
float: none;
text-align: left;
}

and that seemed to fix the problem , could you possibly explain what my issue was ? Was it because other things were floating left, so the ul was inheriting the float left?