title: How do I align input field and submit button (also differences between: IE, FFox, Chrome)?
body: <p>I am having problems styling form fields with CSS. As you can see below I am trying to get an input field and then to its right the submit button. However for some reason I can't get them to align correctly on any browser, nor can I get them to at least look the same in them and finally everything goes bad when I zoom as well!</p>
  
  <p>I have tried the "line-height:normal !important;" solution, but that doesn't seem to work either...</p>
  
  <p>What am I doing wrong?</p>
  
  <p><em>IE7 (xp)</em>  </p>
  
  <p><img src="https://i.stack.imgur.com/1ziQI.png" alt="IE7"><br>
  <em>FFox (linux)</em></p>
  
  <p><img src="https://i.stack.imgur.com/TDBhO.png" alt="FFox"><br>
  <em>Chrome (linux)</em></p>
  
  <p><img src="https://i.stack.imgur.com/wXPpl.png" alt="Chrome"><br>
  CSS (nothing for subscribe_form):</p>
  
  <pre><code>#form_box {
      position: relative;
      height: 35px;
      top: 7px;
      left: 20px; 
  }
  
  #subscribe_email {
      border: solid 1px #CCC;
      height: 24px;
      width: 250px;
      font-size: 15px;
      color: #999;
      padding-left: 5px;
  }
  
  #subscribe_submit {
      position: relative;
      border: solid 1px #CCC;
      height: 25px;
      width: 115px;
      color: white;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;div id="box2" class="tbox"&gt;
              &lt;div id="form_box"&gt;
              &lt;form id="subscribe_form" action="subscribe" method="post"&gt;
                  Sign Up:
                  &lt;input class="tbox" id="subscribe_email" type="text" name="email" value="email address" /&gt;
                  &lt;input class="tbox" id="subscribe_submit" type="submit" value="Subscribe" /&gt;
              &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>