First Child List Item Not Aligned in Chrome (Mac/Windows)

Question

JSFiddle: http://jsfiddle.net/UXA5Q/

I have the following HTML code:

      <ul class="advisorlist">
           <li>                     
              <div class="employee">
                   <address>
                       <a title="E-mail John Doe" href="http://www.example.com/employee.html" rel="nofollow" class="email"><strong>John Doe</strong></a>
                       <br><em>Academic Advisor</em>
                      <br>Phone: 540-351-5555                           
                      <br>Fax: 540-351-5555                             
                   </address>                                           
               </div>                                          
            </li>                                      
            <!-- etc -->
       </ul>

And the following CSS Code:

ul.advisorlist {
    clear:both;
    list-style: none;
}
ul.advisorlist li {
    float: left;
    padding: 0;
    margin: 10px 10px 0 10px;
    width: 140px;
    min-height: 200px;
    height: auto !important;
    height: 200px;
}

The first item in the list is unaligned in Chrome on Mac/Windows. Chromium, FF, Safari, IE, etc. show all the list items correctly.

Any ideas?

Answer 1

li {
list-style-position: inside;
}

worked for me. Thank you all for your efforts!

Answer 2

.remove the clear:both from the parent of li and add overflow: hidden to the ul

Answer 3

clear: both means no floating elements may be adjacent to an earlier floating box on either side.

The clear property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

http://www.w3.org/wiki/CSS/Properties/clear

Some more very detailed info on clear: http://www.w3.org/TR/CSS2/visuren.html#flow-control

Remove it and you're looking good.

Also, you have a bunch of css which doesn't do much! Check out this jsFiddle fork I put together.

Answer 4

Try removing clear:both; on ul.advisorlist.

jsFiddle example