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

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.

This css solved the problem for me:

li {
    clear:left;
}

li {
list-style-position: inside;
}

worked for me!

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

The background for this can be found here in the bug reports with a test case here. It only happens if you have a float:left applied to the block. The recommended fix is to do clear:left;, but you may need to be careful with targeting so that you don't accidentally clear elements that aren't buggy (like menus).

I have face this kind of problem. I fixed this by doing this. Please take a look the code style carefully. I hope it would help you.

<ul>
     <li>Toolbox </li><li>
         Context Menus</li><li>
         Tool Options Bar </li><li>
         Menu Bar </li><li>
         ------ 
        File  Browser </li>
 </ul>