Update Panel .NET

Exploring Microsoft ASP.NET AJAX and jQuery

Are you having trouble aligning form fields?

with one comment

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.

Written by tzkuei

May 13, 2009 at 10:00 pm

Posted in CSS, HTML

One Response

Subscribe to comments with RSS.

  1. 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


Leave a Reply