title: HTML form alignment - input with label
body: <p>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.</p>
  
  <p>This is how the form looks in Safari, Firefox and Chrome: </p>
  
  <p><img src="https://i.stack.imgur.com/b7Q2W.png" alt="enter image description here"></p>
  
  <p><a href="http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/" rel="nofollow noreferrer">http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/</a></p>
  
  <p>This is how the form looks in IE6 and IE7: </p>
  
  <p><img src="https://i.stack.imgur.com/HyOv3.png" alt="enter image description here"></p>
  
  <p><a href="http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/" rel="nofollow noreferrer">http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/</a></p>
  
  <p>And this is IE8 and IE9: </p>
  
  <p><img src="https://i.stack.imgur.com/evq3H.png" alt="enter image description here"></p>
  
  <p><a href="http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/" rel="nofollow noreferrer">http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form method="post" action="?test" id="form"&gt;
      &lt;label for="user"&gt;USERNAME&lt;/label&gt;
      &lt;input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required /&gt;
      &lt;div id="empty-user" class="fail"&gt;This stuff will get replaced by the title contents.&lt;/div&gt;
      &lt;label for="password" class="clear"&gt;PASSWORD&lt;/label&gt;
      &lt;input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required /&gt;
      &lt;div id="empty-password" class="fail"&gt;This stuff will get replaced by the title contents.&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>vertical-align: middle;
  </code></pre>
  
  <p>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.</p>
  
  <p>What can I do about this issue? Dropping the height on the input field is not an option for me.</p>