|
|
Posted by Ben C on 11/02/06 11:00
On 2006-11-01, ivan.svaljek@gmail.com <ivan.svaljek@gmail.com> wrote:
> 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">
> <!--
> html, body {
> height: 100%;
> margin: 0;
> padding: 0;
> }
> table {
> height: 100%;
> width: 100%;
> background-color: #CCC;
> }
> td {
> text-align: center;
> }
> //-->
> </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.
Navigation:
[Reply to this message]
|