Strange padding in list item

Question

I have a button in a list item. The button should fill the whole size of the li, however some strange padding appears and I can't figure out how to remove it:

My relevant CSS part:

input {
    background:url(ic_action_back.png);
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
    background-position:center; 
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#nav {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
}

#nav li {
    display: table-cell;
    padding: 0;
    width: 25%;  /* (100 / numItems)% */
    text-align: center;
    border-right: 1px solid #fff;
    white-space: nowrap;
}​

HTML:

    <ul id="nav">
        <li><input type="button" id="start"></li>
        <li><input type="button" id="start"></li>
        <li><input type="button" id="start"></li>
        <li><input type="button" id="start"></li>
    </ul>

JSFIDDLE reproduced error with padding at the bottom:

http://jsfiddle.net/4LVYj/4/

Note: The problem appears in Chrome but not Firefox.

Answer 1

By default, a table will apply vertical align middle to table-cells.

Try adding the following rule to the CSS:

#nav li {
   vertical-align: top;
}
input {
   display: block;
}

For some reason, Chrome's default styling of the input elmement creates some extra white space below the baseline. Setting display: block seems to fix the problem in Chrome and does not break anything in Firefox.

See demo at: http://jsfiddle.net/audetwebdesign/jHbC7/

Note: There is an issue with Internet Explorer, the button height can collapse to 0 so you may need to add a min-height value corresponding to the height of your background image.