title: Styling HTML Submit Button (CSS, Different Browsers)
body: <p>i want to style a submit button which seems to be rendered abit differently in different browsers. </p>
  
  <pre><code>&lt;p id="lineInput"&gt;
      &lt;label for="task"&gt;Add a Task&lt;/label&gt;
      &lt;input type="text" name="task" id="task" /&gt;
      &lt;input type="submit" id="btnSubmit" value="Add" /&gt;
  &lt;/p&gt;
  
  #lineInput {
      ...
  </code></pre>
  
  <p>position: relative;
   margin: 0px;
      }</p>
  
  <pre><code>#btnSubmit {
      ...
      padding: 6px 8px;
      margin: 0;
      font: 1em/1em Hetilica;
      position: absolute;
      right: 2px;
      top: 3px;
  }
  </code></pre>
  
  <p><img src="https://farm5.static.flickr.com/4070/4670887108_3fc5f9dc78.jpg" alt="alt text"></p>
  
  <p>notice the add button is too low on chrome when <code>#btnSubmit</code> has <code>bottom: 3px</code>. the issue if fixed in chrome with <code>bottom: 5px</code> but in Firefox will be too high</p>