Question

I have a serie of controls on each row (dropdownlist, textbox, button, …). I want them to have the same height. The only problem is I need to ajust manualy the height of each element because 25px for Dropdownlist seems not to be the same as 25px for a textbox. The textbox, for instance, are always bigger. Is there a universal way to do that?

Thanks for helping.

Answer 1

you can apply the following to all the elements you are trying to size:

.box-model {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    height:32px;
}

This will make them, including select boxes adhere to your defined rules. This wont work in older versions of IE. IE6 and 7 are notriously bad at styling select boxes and input fields, and do not support the above CSS.