title: Internet explorer, jQuery: input box jumps/moves when being replaced with the exact same one
body: <p><strong>What I want</strong>: To, on focus, change one input box into another by hide() and show().</p>
  
  <p><strong>What I get</strong>: In Internet Explorer (7/8), the input box moves a few pixels to the right when focusing.</p>
  
  <ul>
  <li>Works well in other browsers (obviously).</li>
  </ul>
  
  <p>Here's a link to where I have re-created the problem:</p>
  
  <blockquote>
    <p>&lt; link removed due to no longer beeing relevant ></p>
  </blockquote>
  
  <p>The source is available in the file linked above, but I'll include it here as well for your convenience.</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt;
  &lt;meta http-equiv="Content-language" content="en"/&gt;
  &lt;script src="includes/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $("#index_login_dummy").focus(function(){
          $(this).hide();
          $('#index_login_dummy2').show().focus();
      });
  });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  .input_h {display:none;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="index_login"&gt;
      &lt;form method="post" name="index_login" action="login.php"&gt;
      &lt;input id="index_login_email" type="text" value="Email" name="email"&gt;
      &lt;input id="index_login_dummy" type="text" value="Password" name="dummy"&gt;
      &lt;input id="index_login_dummy2" type="text" class="input_h" value="Password" name="dummy"&gt;&lt;input type="submit" class="input_button" value="Login"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>+1 for a well formulated question! ;)</p>
  
  <p>EDIT:</p>
  
  <p>When I put the form fields into a table it works as intended. I guess sometimes you have to go with solutions as these, but I hate not knowing why. I am however fine with the explanation that the different browsers draw the form input elements differently (and that in IE the input button affects the rest of the elements).</p>
  
  <p>Working code:</p>
  
  <pre><code>&lt;div id="index_login"&gt;
      &lt;form method="post" name="index_login" action="login.php"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input id="index_login_email" type="text" value="Email" name="email"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="index_login_dummy" type="text" value="Password" name="dummy"&gt;&lt;input id="index_login_dummy2" type="text" class="input_h" value="Password2" name="dummy"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="submit" class="input_button" value="Login"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>