Archive for May 2009
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.