title: Button rendered differently in Firefox vs Webkit
body: <p>I have a couple of buttons inside a div with a specific width, and I am facing a problem where the buttons are being rendered differently in firefox vs chrome and safari. </p>
  
  <p>In firefox, the buttons are bigger and are messing up my layout.</p>
  
  <pre><code>&lt;div id="sort_by"&gt;
      &lt;button id="sort_by_price" class="sortButton" value="1"&gt;Price&lt;/button&gt;
      &lt;button id="sort_by_bedrooms" class="sortButton" value="1"&gt;Bedrooms&lt;/button&gt;
      &lt;button id="compareButton" class="sortButton"&gt;Compare&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>button {
  display:inline;
  float:left;
  background-color:orange;
  border:1px solid orange;
  border-radius:5px;
  -moz-border-radius:5px;
  
  font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size:14px;
  text-decoration:none;
  font-weight:bold;
  color:#FFFFFF;
  cursor:pointer;
  padding:4px 10px 3px 7px;
  
  }
  
  #sort_by {
  width:265px;
  height:35px;
  border-bottom-style:solid;
  border-bottom-width:2px;
  border-color:#c9c9c9;
  padding-top:3px;
  padding-bottom:3px;
  padding-left:5px;
  }
  </code></pre>
  
  <p>Rendered in firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/X4XE5.png" alt="enter image description here"></p>
  
  <p>Rendered in Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/UNVRE.png" alt="enter image description here"></p>
  
  <p>It can be seen that the buttons in firefox are bigger. How can I fix this? Thanks.</p>