HTML form alignment - input with label - html

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;
}