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 { 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.
Search WWH ::

Custom Search