E-mail List Archives

Re: Forms - Extra vertical space


From: Terence de Giere
Date: Nov 26, 2003 8:42AM

The cascading style sheets (CSS) solution provided by everyone is of
course the best way to get rid of extra vertical space when a form is
present in a page.

I just wanted to point out that there are two work-around solutions to
this problem that may affect accessibility, one of which violates some
accessibility guidelines. These solution are common on web pages today
but should be avoided or fixed. These solutions were worked out in the
days before CSS became common.

The first work around, if there is only one form on a page, is to place
the entire contents of the page in the form. While this does not
necessarily specifically violate any accessibility rules, it often means
the form control such as a text input box for a search for example, is
surrounded by a lot of irrelevant material - the form is announced to
the user in some assistive technology, but the functional form control
is buried somewhere in the entire page content. This can cause
confusion, and is a usability issue. Ideally the form element should
only contain those page features directly related to the understanding
and operation of the form. The web site http://www.yahoo.com/ when it
used to have only one form on the page used to use this method.

The second work-around involves invalid HTML and the use of tables. The
vertical space goes away if the form start tag and end tags are placed
in illegal positions in a table. Typically we see the start tag of a
form placed between a table row start tag and a table cell start tag,
and the closing form tag placed between a closing table cell tag and its
corresponding table row closing tag. There are a number of variations
on this involving improper nesting of the tags, but all of them violate
the HTML specifications with respect to allowed structure.

This latter workaround is common with hand coded pages, but will be
caught by an HTML validator. Even the fake validators like the one found
in Dreamweaver 2004 MX can now catch this bad HTML. This form tag
placement solution is still common on the web and if found in older
pages should be corrected. An entire table may be placed inside a form,
or an entire form may be placed inside a table cell, but no other method
is allowed. The web site http://www.yahoo.com/ now uses this method to
avoid vertical space as there is more than one form on the page.

I supposed the reason for the persistence of these methods is a desire
to retain a specific format for older non-CSS browsers like Netscape 3,
or earlier CSS-enabled browsers like Internet Explorer 3. Or it could be
that old coding habits just do not fade away.

Terence de Giere

To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/