table not displaying correctly

  • Thread starter Thread starter tshad
  • Start date Start date
T

tshad

This now seems to be an html issue, but not sure where to go to check it
out.

I have been building my asp.net pages where where I want the table to take
the whole screen (height 100%) unless it is greater than the size of the
screen.

I can get it to work fine except for the table spreading the rows.

There are 3 rows:
Top: holds an image or text about 90px height
Middle: has another table with 2 columns - left has menu and right content.
Should take up most of the screen and have set at 100%.
Bottom: the footer (about 39px).

So the top and bottom are fixed with the middle changing as the use changes
the size of the screen.

But the top and bottom are still about the same size as the middle.

I had to strip out all the asp.net code and css files to get to the lowest
common denominator.

*****************************************


<!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" xml:lang="en" lang="en">

<head><title>
FAQS
</title><meta http-equiv="content-type" content="application/xhtml+xml;
charset=UTF-8" />
<style type="text/css">
html,
body {
height: 100%;
}

body {
margin: 0;
padding: 0;
text-align: center;
color: #555;
}
</style>
</head>

<body>

<!-- #content: holds all except site footer - causes footer to stick to
bottom -->
<div style="height:100%" >

<!-- #header: holds the logo and top links -->
<!-- #header end -->

<table cellpadding="0" cellspacing="0" border="3" style="height:100%">
<tr>
<td style="height:90px">
<div style=" background-color:White">
<!-- <div id="headerImg" class="width"></div>
--> </div>
</td>
</tr>
<tr>
<td>
<div style="text-align:left; width: 776px;
background-color: White; height:100%;border:solid 4px Green">

<table cellspacing="0" cellpadding="0"
style="height:100%" >
<tr>
<td style="width:150px; text-align:left;margin:0
0 0 10px" bgcolor="#EDE2E6">
Advantages<br />
Concerns<br />
</td>
<td>
This is faqs
</td>
</table>

</div>
</td>
</tr>
<tr bgcolor="#EDE2E6">
<td style="height:39px" colspan="2">
</td>
</tr>
</table>
</div>
</body>

</html>
*****************************************

I can't find an html newsgroup so I was hoping someone here could help.

Thanks,

Tom
 
I made some changes that seem that now create the top and bottom rows
correctly, but now the middle, which is 100%, makes the middle row the size
of the screen not just what is left so that the whole table is the size of
the screen. Now the table goes below the bottom of the screen. I tried
taking out one of the 100% from the middle <td> but that just shrunk middle
down so space was spread between the 3 rows and the table is not 100% of the
middle section but the size of the content itself.

******************************************************


<!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" xml:lang="en" lang="en">

<head><title>
FAQS
</title><meta http-equiv="content-type" content="application/xhtml+xml;
charset=UTF-8" />
<style type="text/css">
html,
body {
height: 100%;
}

body {
margin: 0;
padding: 0;
text-align: center;
color: #555;
}
</style>
</head>

<body>

<!-- #content: holds all except site footer - causes footer to stick to
bottom -->
<div style="height:100%;border:solid 4px green" >

<!-- #header: holds the logo and top links -->
<!-- #header end -->

<table cellpadding="0" cellspacing="0" border="3"
style="width:776px;height:100%">
<tr>
<td style="height:100px">
<div style=" background-color:White">
<!-- <div id="headerImg" class="width"></div>
--> </div>
</td>
</tr>
<tr>
<td style=" height:100%; background-color:Yellow;
text-align:left">

<table cellspacing="0" cellpadding="0" style="
border:solid 4px purple;width:100%;height:100%" >
<tr>
<td style="width:150px; text-align:left;margin:0
0 0 10px" bgcolor="#EDE2E6">
Advantages<br />
Concerns<br />
</td>
<td>
This is faqs
</td>
</table>

</td>
</tr>
<tr bgcolor="#EDE2E6">
<td style="height:39px" colspan="2">
</td>
</tr>
</table>
</div>
</body>

</html>
******************************************************

What am I missing?

Thanks,

Tom
 
Back
Top