Question

I have a list of form elements. Labels go next to each element. Some labels, some have text. They are behaving differently in different browsers.

Essentially what’s happening is that the labels which have text are creating whitespace above the list items. The form is much more complex than this, but I’ve boiled it down to this basic code: http://jsfiddle.net/uZ2Et/

#cleanVersion li {
    display: inline-block;
    border: 1px solid gray;
    height: 200px;
    margin: 0;
    padding: 0;
}
#cleanVersion label {
    display: inline-block;
    font-size: 70px;
    background-color: blue;
    border: 0;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 150px;
}
​

<div id="cleanVersion">
    <ul>
        <li><label>test</label></li>
        <li><label></label></li>
    </ul>
</div>​

I’ve tried adjusting the margins, borders, padding, line-height… but still the labels remain inconsistent.

How do I get rid of the whitespace which appears above the list items with text in them?

Edit: Here’s a more complex example which is closer to what I’m actually doing: http://jsfiddle.net/uZ2Et/6/

Answer 1

Use vertical-align: top; on the list items: http://jsfiddle.net/uZ2Et/1/