Question

I am trying to make this for accessable for all browsers. Different browsers are giving different results (with IE the most problematic for me). I included screenshots so that you can see what I am talking about.

This is how the form looks in Safari, Firefox and Chrome:

http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/

This is how the form looks in IE6 and IE7:

http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/

And this is IE8 and IE9:

http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/

HTML

<form method="post" action="?test" id="form">
    <label for="user">USERNAME</label>
    <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    <div id="empty-user" class="fail">This stuff will get replaced by the title contents.</div>
    <label for="password" class="clear">PASSWORD</label>
    <input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required />
    <div id="empty-password" class="fail">This stuff will get replaced by the title contents.</div>
</form>

CSS

label {
    background: yellow;
    font-size: 12px;
    font-weight: bold;
    width: 100px;
    float: left;
    margin-right: 50px;
    text-align: right;
    cursor: pointer;
}

input {
    height: 30px;
    background-color: #fafafa; 
    border: 1px solid #abaaaa;
    width: 300px;
    margin: 5px 0 5px 0;
    float: right;
}

Now my question is, how can I align the labels so they are vertically aligned with the input fields? I’ve used the search here and most of the time something like

vertical-align: middle;

is recommended, but this isn’t working at all. The only fix for Safari, Chrome and Firefox is adding a margin-top or padding-top to the labels, but this destroys the form in IE8 and IE9.

What can I do about this issue? Dropping the height on the input field is not an option for me.

Answer 1

put a clear:both after the input tag (somewhere).

I would suggest you add more markup to your forms for extra customization. Typically I like to do forms like this:

<div class="field">
    <label for="user">USERNAME</label>
    <div class="field-subject">
        <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    </div>
</div>

.field { 
    overflow: auto; /* this "clears" the floated elements */
    margin-bottom: 10px;
}

.field label {
    float: left;
    width: 200px;
}

.field .field-subject {
    float: left;
    width: 500px;
}