<form> element defeats overflow

I've been using a simple technique that works adequately, for me, to
restrict a web page to the viewport. A typical page will have a
header, a table wrapped in a <div> with "overflow: auto", and some
footer information.

A very pared down example with borders around the various elements for
demonstration lives (temporarily) here:
http://www.questright.com/tmp/css-scroll-table.html

This works well in IE and adequately in Mozilla and Firefox.

However, if I introduce a form element which includes the table,
Mozilla based browsers (e.g., Mozilla 1.7.8 running on my Debian/sarge
desktop) does not display as intended. The <div> wrapping the table
expands to the full height of the table pushing the bottom of the table
and the footer out of the viewport. IE still handles it as intended.
The same page with <form> element introduced resides here:
http://www.questright.com/tmp/css-sc...able-form.html

I need a (hopefully simple) technique that works adequately across
browsers to accomplish the goal.

-Marc

On 2007-01-05, semifor <marc.mims (AT) gmail (DOT) com> wrote:

I've been using a simple technique that works adequately, for me, to
restrict a web page to the viewport. A typical page will have a
header, a table wrapped in a <div> with "overflow: auto", and some
footer information.

A very pared down example with borders around the various elements for
demonstration lives (temporarily) here:
http://www.questright.com/tmp/css-scroll-table.html

This works well in IE and adequately in Mozilla and Firefox.

However, if I introduce a form element which includes the table,
Mozilla based browsers (e.g., Mozilla 1.7.8 running on my Debian/sarge
desktop) does not display as intended. The <div> wrapping the table
expands to the full height of the table pushing the bottom of the table
and the footer out of the viewport. IE still handles it as intended.
The same page with <form> element introduced resides here:
http://www.questright.com/tmp/css-sc...able-form.html

In this version the form is the containing box for the tableContainer,
and since the form is height: auto, the tableContainer's height of 70%
no longer makes sense and is converted to auto.

If you give the form a height as well, then the percentages can be
resolved and the tableContainer will be 70% of that height.