How do I get table heights to stretch to 100%?

Forum Moderators: open

Message Too Old, No Replies

How do I get table heights to stretch to 100%?

table heights 100%

slimnutty5000

5:30 pm on Oct 5, 2006 (gmt 0)

I have searched all over google and have not found a good answer to this question. I want to have my table or left column stretch to full size of a browser, basically 100% height. Ive tried adding it to the tr, td, table, css etc... nothing seems to work. Ive also read something about changing the doctype to 3.2 that didnt work either.

Any help?

Thanks

DrDoc

5:31 pm on Oct 5, 2006 (gmt 0)

Welcome to WebmasterWorld!

Make sure to set the body height to 100% as well.

slimnutty5000

5:52 pm on Oct 5, 2006 (gmt 0)

Adding to the Body still doesnt work.

DrDoc

5:57 pm on Oct 5, 2006 (gmt 0)

Did you still leave the 100% height for the table itself?

html, body, table {
height: 100%;
}

slimnutty5000

6:08 pm on Oct 5, 2006 (gmt 0)

that seems to be going in the right direction. I changed table to TD instead and it stretches all TDs to 100%. So the function is there, i just need a way to isolate to a single TD. I think there is a way i can do that by creating a class or ID in CSS, but i need some help with that. Im not the best in CSS.

Thanks

jessejump

11:41 pm on Oct 5, 2006 (gmt 0)

td.isolated {..........}

in table:
<td class= "isolated" ..........>

slimnutty5000

5:04 pm on Oct 6, 2006 (gmt 0)

I tried using Td.isolated, even ID tags, #isolated, and still nothing. I found this topic on google, and i still cant get it to work.
[apptools.com...]

Also here is a link to the site im trying to get it to work on, maybe someone can look at the code and tell me what im doing worng. <Sorry, no personal links. See Forum Charter [webmasterworld.com]>

[edited by: tedster at 5:39 pm (utc) on Oct. 6, 2006]

slimnutty5000

7:23 pm on Oct 6, 2006 (gmt 0)

Ok sorry about that, didnt think of that. Heres a code snippet of the header, maybe this will help;

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="styles/design.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" valign="top" height="100%"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ED1E26">
<tr>
...............
<tr align="top">
<td width="10%" rowspan="2" valign="top" background="images/left_tile.gif" class="stretch">
<table width="100" border="0" cellpadding="0" cellspacing="0">

<tr>
........

I cut out a lot of the insides, hopefully this can help.

slimnutty5000

7:49 pm on Oct 6, 2006 (gmt 0)

I got it to work! at least in FF...:(. IE is giving me this extra white space between my header and the body content.

This is the snippet of where they meet in the code:

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stretch">
<tr height="97" valign="top">
<td colspan="2" valign="top" height="97"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ED1E26">
<tr>
..............content cut out................
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr valign="top">
<td width="10%" rowspan="2" valign="top" background="images/left_tile.gif">
<table width="100" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="194" valign="top"><table width="194" border="0" cellspacing="0" cellpadding="0">

slimnutty5000

8:09 pm on Oct 6, 2006 (gmt 0)

Finally fixed! I changed my fixed heights in the main TR and TD to percentages and it now works perfectly in IE and FF and MAC! Thanks for the help anyways.