title: form element width
body: <p>On <a href="http://upstudio.ie/donal/create.htm" rel="nofollow">this page</a> the Longitude form input has a width of 181px and the Type select has a width of 175px. I can't figure out why they have different widths, because in both cases the relevant CSS rule is:</p>
  
  <pre><code>.uniForm .small {
      width: 30% !important;
  }
  </code></pre>
  
  <p>and the parent div in both cases has a width of 604px.</p>
  
  <p>Similarly, the Country select is 6px shorter than the Address text input, even though they both seem to be governed by the same CSS rules.</p>
  
  <h2>Update</h2>
  
  <p>Thanks to the explanations about the different box-sizing models used, I added the following CSS rule, but it doesn't seem to have fixed the problem (in Firefox):</p>
  
  <pre><code>html {      
      -webkit-box-sizing: border-box;
      -o-box-sizing: border-box;
      -khtml-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  </code></pre>