title: CSS padding on input element breaks ie6 ie7
body: <p>After a bunch of googling and searching, I can't seem to find any info on this.</p>
  
  <p><strong>The problem:</strong></p>
  
  <p>In ie6 and ie7, the text entered into a styled input is displayed "cut in half", with some of the text clipped off in the middle and the remainder hidden underneath the bottom of the input.</p>
  
  <p>Picture the word <code>FOOBAR</code> inside the input. You would only be able to see the top-half of the word, with the bottom-half hidden by the bottom-part of the input.</p>
  
  <p>The input element:</p>
  
  <pre><code>&lt;input name="email" size="40" type="text" id="email" class="input" /&gt;
  </code></pre>
  
  <p>The styling:</p>
  
  <pre><code>input, select, textarea {
      font: 13px Verdana, Geneva, sans-serif;
  }
  
  input.input, textarea.textarea {
      padding: 10px;
  }
  </code></pre>
  
  <p>When I adjust the padding between 0-2px, everything is fine. Increasing the padding pushes the text further south.</p>
  
  <p>All other mainstream browsers work fine, just ie6 and ie7 are giving me headaches.</p>
  
  <p>There are no other styles in play.</p>