Table height inside form

ivan.svaljek · Nov 1, 2006

I'm working on an ASP.NET project(requires controls to be placed inside
form tag, and XHTML transitional). The problem is with setting the
table height to 100%, I'm using css to accomplish that, but firefox
doesn't like it inside form element.
This is the table height code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table Height Test</title>
<style type="text/css">

</style>
</head>
<body>
<table>
<tr>
<td>
Centered Content
</td>
</tr>
</table>
</body>
</html>

It works as advertised(ie,opera,firefox), until I put the table in the
form element(as required by ASP.NET) - then firefox leaks.
Any ideas?

Ben C · Nov 2, 2006

I'm working on an ASP.NET project(requires controls to be placed inside
form tag, and XHTML transitional). The problem is with setting the
table height to 100%, I'm using css to accomplish that, but firefox
doesn't like it inside form element.
This is the table height code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table Height Test</title>
<style type="text/css">

</style>
</head>
<body>
<table>
<tr>
<td>
Centered Content
</td>
</tr>
</table>
</body>
</html>

It works as advertised(ie,opera,firefox), until I put the table in the
form element(as required by ASP.NET) - then firefox leaks.

It doesn't "leak"! You're asking for the table to be 100% of the height
of the form (which now the table's containing block). Since the form's
height is automatically the height of the table anyway, the height: 100%
is both meaningless and immaterial. So Firefox is doing the correct
thing.

Any ideas?

If you need the form to have an auto height, the only ways to do this I
know of all involve using another table. This is one that works in FF,
Opera and Konqueror:

<table style="height: 100%">
<td style="vertical-align: middle">
<form>
<table>
<tr>
<td>
Centered Content
</td>
</tr>
</table>
</form>
</td>
</table>

Obviously you'll want to change your styles so the outer table doesn't
get the grey background colour.

Now the outer table is 100% of the viewport, and aligned in the middle
of its only cell is the form containing the inner table.

cantrun · Nov 2, 2006

It doesn't "leak"! You're asking for the table to be 100% of the height

of the form (which now the table's containing block). Since the form's
height is automatically the height of the table anyway, the height: 100%
is both meaningless and immaterial. So Firefox is doing the correct
thing.

That was the case, thanks.

If you need the form to have an auto height, the only ways to do this I
know of all involve using another table. This is one that works in FF,
Opera and Konqueror:

It seems that <form style="height:100%"> does the trick.

Thanks again.

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Can't make table the size of the screen	12	Apr 29, 2010
Table height issue in IE7	8	Feb 12, 2007
Having trouble centering contents of td ?	3	May 2, 2023
How to wrap <td> content .	16	Sep 28, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
two tier grid inside of a table	0	Jul 6, 2012
Align img inside nav tabs section	5	Dec 29, 2023

Table height inside form

ivan.svaljek

Ben C

cantrun

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads