Experiment
In Form
Date created
18 March 2004
Date last modified
24 March 2004
Discussion
Visit the discussion

The Vertical Form

There's no real positional styling going on in this form, it's merely padding, margin and width. All the text fields have been given a standard width to make them look neat, and the fieldsets have been given the same width + padding. It does look a bit stark on this page, but would be ideal for a left-column login or search box.

Note also, the first label in each fieldset has been given a class of "first". This is because if you place any margin on the legend element, it screws up in Mozilla (pushes the legend out of the top of the fieldset). So, I need to add margin top to the first element inside the fieldset, and first-child selectors don't work in IE :o]

Name
Address
Payment details
Credit card