Prev | Current Page 407 | Next

Craig Grannell

"The Essential Guide to CSS and HTML Web Design"

This is a device I??™ve used on various
versions of the Snub Communications website??™s contacts page, as shown in the following
screenshot.
Regardless of the form styles you end up using, be sure to rigorously test across browsers,
because the display of form elements is not consistent. Some variations are relatively
minor??”you??™ll find that defining values for font sizes, padding, and borders for input fields
doesn??™t always result in fields of the same height, and that text fields and Submit buttons
don??™t always align. A more dramatic difference is seen in versions of Safari prior to 3.0,
which ignore many CSS properties for forms, instead using the Mac OS X ???Aqua??? look and
feel??”see the following screenshot for how the Snub Communications form looks in that
browser. Form functionality is not affected by this, but layouts can be.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
322
Advanced form layout with CSS
A common way of laying out forms is to use a table to line up the labels and form controls,
although with the output being non-tabular in nature, this method is not recommended
(CSS should be used for presentation, including positioning elements on a web page)??”it??™s
provided here to show a (partial) table layout that can be replicated in CSS. For our first
three fields, a table-based form may have something like this:

Personal information
?? summary="A contact details form.


Pages:
395396397398399400401402403404405406 407 408409410411412413414415416417418419