E-mail List Archives
Thread: Forms - Extra vertical space
Number of posts in this thread: 7 (In chronological order)
From: Laurie Davis-Covin
Date: Tue, Nov 25 2003 9:51AM
Subject: Forms - Extra vertical space
No previous message | Next message →
I think I missed this answer a few weeks ago. I'm experiencing extra
vertical space when I
insert the form tags.(I've validated down to this.) Because I'm using a
search control on my banner and
I have a connecting left nav bar, it is very obvious.
Can anyone help?
Laurie Davis-Covin, Web Specialist/Writer
National Institute of Standards and Technology
100 Bureau Drive
Admin. Building, Room E 220
Gaithersburg, MD 20899
Ph: 301-975-8027
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Michael D. Roush
Date: Tue, Nov 25 2003 10:01AM
Subject: Re: Forms - Extra vertical space
← Previous message | Next message →
----- Original Message -----
From: "Laurie Davis-Covin" < = EMAIL ADDRESS REMOVED = >
> I think I missed this answer a few weeks ago. I'm experiencing extra
> vertical space when I
> insert the form tags.(I've validated down to this.) Because I'm using a
> search control on my banner and
> I have a connecting left nav bar, it is very obvious.
For most browsers, a "form" gets a default top and bottom margin much like a
paragraph tag does. Perhaps if you include a style specification to remove
those margins, it will fix the problem?
<form method='[post|get]' action='http://www.yoursite.gov/yourprocessor.ext'
style='margin-top: 0px; margin-bottom: 0px;'>
Try this in your form, and if it works then you can put the style
specification in the head or in an external style sheet, whichever one you
are using for your site.
Michael
AccessRamp.org
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Cheryl D. Wise
Date: Tue, Nov 25 2003 10:25AM
Subject: RE: Forms - Extra vertical space
← Previous message | Next message →
Style your form tag
Form {margin: 0; padding: 0;}
Cheryl D. Wise
MS-MVP-FrontPage
www.wiserways.com
mailto: = EMAIL ADDRESS REMOVED =
713.353.0139 Office
From: Jared Smith
Date: Tue, Nov 25 2003 10:42AM
Subject: Re: Forms - Extra vertical space
← Previous message | Next message →
The form tag is a block level tag, so it will always be placed on a
new line with additional vertical space, much like the p tag. You can
change this behavior by styling the form tag to behave like an inline
tag -
<form style="display:inline;">
Jared
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Jukka K. Korpela
Date: Tue, Nov 25 2003 12:06PM
Subject: Re: Forms - Extra vertical space
← Previous message | Next message →
On Tue, 25 Nov 2003, Laurie Davis-Covin wrote:
> I think I missed this answer a few weeks ago.
I don't even remember the question having been asked. But the list has a
nice archive: http://www.webaim.org/discussion/archives
> I'm experiencing extra vertical space when I
> insert the form tags.
I don't see how this relates to Web accessibility.
But anyway, the short answer is: use
form { margin: 0; }
in a style sheet. There's a long answer at
http://www.cs.tut.fi/~jkorpela/forms/extraspace.html
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Laurie Davis-Covin
Date: Tue, Nov 25 2003 12:26PM
Subject: Re: Forms - Extra vertical space
← Previous message | Next message →
Thank you all, I appreciate the help. I'm coding for Netscape 4.x so it's
always more of a
challenge. And, you're right Jukka, this doesn't relate to accessibility,
but I am
adding space at the top of my banner for a skip link.
(Sorry, I mistakenly put this out to webaim)
At 08:59 PM 11/25/2003 +0200, you wrote:
>On Tue, 25 Nov 2003, Laurie Davis-Covin wrote:
>
> > I think I missed this answer a few weeks ago.
>
>I don't even remember the question having been asked. But the list has a
>nice archive: http://www.webaim.org/discussion/archives
>
> > I'm experiencing extra vertical space when I
> > insert the form tags.
>
>I don't see how this relates to Web accessibility.
>
>But anyway, the short answer is: use
>form { margin: 0; }
>in a style sheet. There's a long answer at
>http://www.cs.tut.fi/~jkorpela/forms/extraspace.html
>
>--
>Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
>
>
>----
>To subscribe, unsubscribe, suspend, or view list archives,
>visit http://www.webaim.org/discussion/
Laurie Davis-Covin, Writer/Editor
National Institute of Standards and Technology
100 Bureau Drive
Admin. Building, Room E 220
Gaithersburg, MD 20899
Ph: 301-975-8027
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Terence de Giere
Date: Wed, Nov 26 2003 8:42AM
Subject: Re: Forms - Extra vertical space
← Previous message | No next message
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
= EMAIL ADDRESS REMOVED =
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/