First list item (<li>) floating right in google chrome

Question

I am having problem with google chrome. The problem is the first list item's bullet is floating right while all other list item's bullet aligned correctly at left.

Here is my code:

 <div class="window_sub_title2">The Interface</div>          
 <ul>
     <li>Toolbox </li>
     <li>Context Menus </li>
     <li>Tool Options Bar </li>
     <li>Menu Bar </li>
     <li>Palette Well </li>
     <li>Rulers </li>
     <li>Guides and grid </li>
     <li>Navigating in Photoshop </li>
     <li>Shortcuts </li>
     <li>File  Browser </li>
 </ul>

This is how it looks in chrome : http://www.flickr.com/photos/41695354@N08/4807767137/

Here is the actual link.

Answer 1

This css solved the problem for me:

li {
    clear:left;
}

Answer 2

li {
list-style-position: inside;
}

worked for me!

Answer 3

Use CSS to manually override all the defaults of spacing and padding of the bullets.