title: css inconsistency with firefox - select form fields
body: <p>I have a form with <code>input</code> and <code>select</code> fields all at <code>height:32px</code>.<br />
  Firefox aligns the text to the top while all the other browsers align center. <br /><br />
  I would like to align the text to center, but seem to be having problems.<br />
  Any suggestions please? <a href="http://jsfiddle.net/nalagg/ULQNQ/1/" rel="nofollow noreferrer">HERES MY FIDDLE</a></p>
  
  <p><img src="https://i.stack.imgur.com/Nflxc.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;select id="month" class="" name="month"&gt;
      &lt;option value="1"&gt;February&lt;/option&gt;
      &lt;option value="2"&gt;March&lt;/option&gt;
      &lt;option value="3"&gt;April&lt;/option&gt;
      &lt;option value="4"&gt;May&lt;/option&gt;
      &lt;option value="5"&gt;June&lt;/option&gt;
      &lt;option value="6"&gt;July&lt;/option&gt;
      &lt;option value="7"&gt;August&lt;/option&gt;
      &lt;option value="8"&gt;September&lt;/option&gt;
      &lt;option selected="" value="9"&gt;October&lt;/option&gt;
      &lt;option value="10"&gt;November&lt;/option&gt;
      &lt;option value="11"&gt;December&lt;/option&gt;
      &lt;option value="12"&gt;undefined&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="text" value='some text' /&gt;
  </code></pre>
  
  <p><strong>update</strong>: <code>line-height</code> didnt seem to do anything</p>
  
  <pre><code>#month, input {height:32px; line-height:32px; vertical-align:middle;}
  #month select{line-height:32px;}
  </code></pre>