Question

On this page 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:

.uniForm .small {
    width: 30% !important;
}

and the parent div in both cases has a width of 604px.

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.

Update

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):

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;
}

Answer 1

To make sure different elements employ the same size, as specified in CSS, first make sure they’re all using the same box-sizing model, such as:

-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;

JS Fiddle demo.

---

Edited in response to question from OP, in comments below:

Would you be able concoct some sort of rule that would ensure a consistent box sizing model is applied to all form elements?

A rule itself is easy enough to create, but it won’t be implemented by all form elements, since <input type="radio" /> and <input type="checkbox" /> (at the least) will disregard the rules, however my best attempt, currently:

#formElementID input, /* note that this will include `<input type="submit" />` and so on...
#formElementID select,
#formElementID textarea {
    -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;
}

References:

• box-sizing at Mozilla Developer Network.