Interesting problem

[Accurax]

At the risk of becoming a pest, i have stumbled accross a rather infuriating problem.... I've asked several people, and as yet no-one has managed to figure out what is happening.

The problem:
I have a div tag #divleft ... it which i have a simple un ordered list with 10 li elements, here is the code for the list:

[code]  <div id="divLeft">
    <ul id="ulmainnav">
  <li> Accounting Services & Hosted Software</li>
  <li>Payroll Services</li>
  <li>Credit Controll</li>
  <li>Archiving Solutions</li>
  <li> Cost Down Programs</li>
  <li>Quality Systems</li>
  <li>Business Planning</li>
  <li>Search & Selection</li>
  <li>Marketing Solutions</li>
  <li>VOIP Solutions</li>
  </ul>
  </div>[/code]

And here is the CSS for both the list elements and the div itself respectivly

[code]#ulmainnav li {
list-style-type: none;
text-align: left;
margin:0;
width: 120px;
padding: 0;
}
#ulmainnav ul {
padding:0;
margin:0;
}[/code]

and the div:

[code]#divLeft {
float: left;
width: 120px;
background-color: #C4D0E7;
line-height: normal;
clear: left;
}[/code]

the problem is that the list elements seem to justify themselves at some imaginary point halfway accross the div tag, rather than at the left hand edge as i would like. This especially a problem in firefox, as the text actually breaks out of the divtag and runs into whitespace on the page.... looking pretty tatty.

Has anybody got any idea whats causing this.... and how it can be fixed??

Thanks

[Daniel0]

Change the left-padding of the li to something like 1em.