title: firefox absolute positioning problem
body: <p>I am having trouble rendering this correctly in firefox. It renders nicely in chrome and in safari.</p>
  
  <pre><code>&lt;div style="" id="login_inline"&gt;
      &lt;form accept-charset="utf-8" action="/users/login" method="post" id="UserLoginForm"&gt;
      &lt;div style="display:none;"&gt;
          &lt;input type="hidden" value="POST" name="_method"&gt;
      &lt;/div&gt;
      &lt;input type="text" id="UserDummyEmail" tabindex="1" value="Email" name="data[User][dummyEmail]" style="display: block;"&gt;
      &lt;input type="text" id="UserDummyPassword" tabindex="2" value="Password" name="data[User][dummyPassword]" style="display: block;"&gt;
      &lt;input type="text" id="UserEmail" maxlength="255" tabindex="3" name="data[User][email]"&gt;
      &lt;input type="password" id="UserPassword" tabindex="4" name="data[User][password]"&gt;
      &lt;div class="submit"&gt;
          &lt;input type="submit" value="Login"&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#login_inline {
  position:absolute;
  right:10px;
  top:30px;
  width:420px;
  }
  
  .submit {
  display:inline;
  position:absolute;
  left:360px;
  }
  
  #UserPassword {
  position:absolute;
  left: 185px;
  }
  
  #UserDummyPassword {
  position:absolute;
  left:185px;
  z-index:1;
  color:gray;
  }
  
  #UserDummyEmail {
  position:absolute;
  left:10px;
  z-index:1;
  color:gray;
  }
  
  #UserEmail {
  position:absolute;
  left:10px;
  }
  </code></pre>
  
  <p>Firefox rendering:</p>
  
  <p><img src="https://i.stack.imgur.com/2PnOw.png" alt="Firefox rendering"></p>
  
  <p>Chrome rendering:</p>
  
  <p><img src="https://i.stack.imgur.com/iItjy.png" alt="enter image description here"></p>
  
  <p><strong>EDIT:</strong> <a href="http://jsfiddle.net/yYeFc/" rel="noreferrer">Live example (Correct rendering)</a></p>