Are you having trouble aligning form fields?
If you specify the same width (and/or height) to your form fields, i.e. inputs, textareas and selects, and wondered why they don’t line up, then you need to know the difference between their box models.
The following elements follow the W3C Box Model: (i.e. width excludes paddings and borders)
- <input type=”file” />
- <input type=”text” />
- <textarea />
And the following elements follow the Traditional (IE) Box Model: (i.e. width includes paddings and borders)
- <input type=”button” />
- <input type=”checkbox” />
- <input type=”radio” />
- <input type=”reset” />
- <input type=”submit” />
- <select />
So, you need to ensure that the width (and/or height) of the second set of elements should equal width + paddings + borders of the first set of elements.
Unfortunately textarea width is handled differently by different browsers, due to scrollbars, so lining those up perfectly with other fields in every browser isn’t possible.
Adam
December 4, 2009 at 5:13 pm