title: CSS/HTML form: button alignment wrong in IE and Opera
body: <p>I am currently stuck with a weird alignment problem in my HTML form.
  in Firefox/Chrome/Konqueror the layout is just fine - see below</p>
  
  <p><img src="https://i.stack.imgur.com/XnVIo.png" alt="Layout in FireFox"></p>
  
  <p>But in IE8 and Opera the layout looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/jSDl8.png" alt="Layout in IE"></p>
  
  <p>My HTML looks like this</p>
  
  <pre><code>&lt;body bgcolor="#FFFFFF" text="#3d4144" id="jobs"&gt;
  &lt;div align="center"&gt;
      &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
        &lt;tr&gt;          
      &lt;td style="text-align: center;"&gt;Please login to post a job.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;
     &lt;div id="stylized" class="myform"&gt;
       &lt;form id="form" name="form" method="post" action="loginproc.php"&gt;
        &lt;label&gt;Username:
        &lt;span class="small"&gt;Enter your e-mail&lt;/span&gt;
        &lt;/label&gt;
        &lt;input type="text" name="name" id="name"&gt;
        &lt;label&gt;Password:
        &lt;span class="small"&gt;Enter your password&lt;/span&gt;
        &lt;/label&gt;
        &lt;input type="password" name="password" id="password"&gt;
        &lt;button type="submit"&gt;Login&lt;/button&gt;       
       &lt;/form&gt;                 
    &lt;/div&gt;​
  &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
  &lt;td style="text-align: center;"&gt;
    &lt;a class="body" href="register.php" style="text-decoration: none"&gt;If you are not registred yet, you can signup here (free of charge)!&lt;/a&gt;
  &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>
  
   and my CSS looks like this</p>
  
  <pre><code>#stylized input{
  float:left;
  font-size:10px;
  font: normal Verdana,sans-serif;
  padding:5px 2px;
  border:solid 1px #2B578A;
  width:200px;
  margin:2px 0 10px 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  }
  
  #stylized input[type="password"]{
  float:left;
  font-size:10px;
  font: normal Verdana,sans-serif;
  padding:5px 2px;
  border:solid 1px #2B578A;
  width:200px;
  margin:2px 0 10px 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  }
  
  
  #stylized label {
  display:block;
  font-weight:bold;
  float: left;
  width: 10em;
  margin-right: 1em;
  text-align: right;
  width:140px;
  }
  
  #stylized .small{
  color:#666666;
  display:block;
  font-size:11px;
  font-weight:normal;
  text-align:right;
  width:140px;
  }
  
  .myform{
  margin:0 auto;
  width:400px;
  padding:14px;
  }
  
  #stylized button{
  clear:both;
  margin-left:160px;
  width:120px;
  height:25px;
  text-align:center;
  line-height:20px;
  color:#FFFFFF;
  font-size:11px;
  font-weight:bold;
  background:#414549;
  font-family: Verdana, sans-serif;
  border: 0px solid #2B578A;
  }
  
  #stylized button:hover{
  background:#2B578A;
  color:#FFFFFF;
  border: 0px solid #2B578A;
  }
  </code></pre>
  
  <p>The problem begins as soon as I put the form into a table (which I do for some design purposes).</p>