HTML and CSS Reference
In-Depth Information
Figure 11-12.
By setting the
width
property for radio buttons and submit buttons to
auto
,we've
corrected the oversized elements we had previously.
Although we don't have any in this form, it's a good idea to set this for checkboxes any-
way—it “future-proofs” our form, so that if we add checkboxes, we needn't come back and
style them.
■
Note
Internet Explorer 6 and lower does not support attribute selectors. As such, a more practical way to
handle this may be to place a
class
attribute of
radio
on each radio button and then include a CSS rule like
input.radio { width: auto; }
in your style sheet.
We've managed to create a nice, clean form using a handful of CSS rules and semantic
(X)HTML markup. Now, let's try something a little different.
Aligning Labels and Their Fields in the Middle
One popular form layout style is have each label/field pair broken by lines, with the label on
the left but right-aligned, creating a nice column down the middle where the labels meet the
input areas. This layout style is shown in Figure 11-13.
