...

View Full Version : more firefox table row expansion problems



wac
12-14-2006, 04:18 PM
:confused:
I've tried several suggestions in this forum to no avail. I'm not sure what I'm doing wrong. The following HTML works fine in IE. The header of the table is at the top of the page and the footer is at the bottom. The central left and right expand to fill the page when the page is resized. In firefox, however, the table always shrinks to the content size, despite me using a body height of 100% and a table height of 100%. How would I fix this??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<title>The logon page</title>
<style type="text/css">
#art_top
{
background: url(LogonArtTop.gif) no-repeat;
height: 180px;
width: 168px;
}

#art_tile, #art
{
background: url(/LogonArtTile.gif) repeat-y;
width: 168px;
color:red;
}

</style>
</head>

<BODY class="workarea" onLoad='setFocus("userName");' style="height:100%">

<!-- Banner -->
<table style="width:100%;height:100%" cellpadding="0" cellspacing="0" border='1' bordercolor='green'>
<thead>
<tr>
<td colspan="2" valign="top" style="height:4em" >
&nbsp;
</td>
</tr>
</thead>
<tr id="mainTableRow" style="height:81%">
<td id="art" valign="top" style="width:168px;">
&nbsp;
</td>

<td id="form_container" valign="top" width="85%">
&nbsp;
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='2' style="width:100%;height:2em" valign="bottom">
&nbsp;
</td>
</tr>
</tfoot>
</table>

</body>
</html>

wac
12-14-2006, 05:25 PM
This seems to be associated with body not expanding to fill the page dispite a style of height:100%. I tried min-height:100% to no avail

wac
12-14-2006, 05:35 PM
apparently I needed 100% on both html and body.. as

style

html, body
{
height: 100%
}

This works nicely...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum