Table not displaying properly

tshad

unread,

Apr 27, 2010, 6:56:19 PM4/27/10

to

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">

<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>

<div style="height:100%" >

<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>
*****************************************

Thanks,

Tom

tshad

unread,

Apr 28, 2010, 1:14:48 PM4/28/10

to

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.

BTW, this works fine in FireFox.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>

<table cellpadding="0" cellspacing="0" border="3"

style="width:776px;height:100%">
<tr>
<td style="height:100px">

<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

tshad

unread,

Apr 28, 2010, 11:05:15 AM4/28/10

to

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">

<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>

<table cellpadding="0" cellspacing="0" border="3"

style="width:776px;height:100%">
<tr>
<td style="height:100px">

<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

"tshad" <t...@dslextreme.com> wrote in message
news:f9965dcc-5a4e-4b24...@a18g2000prd.googlegroups.com...

tshad

unread,

Apr 28, 2010, 2:55:32 AM4/28/10

to

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">

<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>

<table cellpadding="0" cellspacing="0" border="3"

style="width:776px;height:100%">
<tr>
<td style="height:100px">

<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
"tshad" <t...@dslextreme.com> wrote in message
news:f9965dcc-5a4e-4b24...@a18g2000prd.googlegroups.com...