Re: Can't make table the size of the screen

Andy wrote:
"tshad" <tfs@xxxxxxxxxxxxxx> wrote in message
news:3c7007ad-abc8-4a86-a6ed-1d6720747556@xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
I don't have a URL to point to as I don't have a website. This is
just being done at home at the moment.

I am trying to make a master page where the main table is the size of
the screen or greater.

This works fine in FireFox.

In the table, 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 user
changes the size of the screen.

But the top and bottom are still about the same size as the middle
and change as the screen changes (they should never change).

I had to strip out all the asp.net code and css files to get to the
lowest common denominator with just a basic table.

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


<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 made some changes that seem to 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>
******************************************************

I tried changing the DTD to different settings but that didn't work.

I did find an interesting thing, if I just commented out the old DTD
and created a new one.
*******************************************************************
/* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> */

/*<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/ TR/html4/strict.dtd">*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http:// www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
*************************************************************************

If I leave the old line as a comment, it works but puts /* */ /* */
at top of page.

If I take out the commented part, it goes back to the old behavior
where the middle row is the size of the screen.

As I mentioned, this works fine in FireFox.

Thanks,

Tom


Hi Tom,

Lose the <divs> as they're constricting the tables. Apply styles to
the <td> instead. Here's an example with coloured borders so you can
see the boundaries...


<body>

<table cellspacing="0" cellpadding="0" width="776" height="100%"
style="border: solid 1px red">
<tr>
<td height="90" colspan="2" style="background: #FFFFFF; border: solid
1px green">HEADING</td>
</tr>

<tr>
<td width="150" height="*" style="margin:0 0 0 10; background:
#EDE2E6; border: solid 1px black">
Advantages<br>
Concerns<br>
</td>
<td width="*" height="*" style="border: solid 1px yellow">This is
faqs</td> </tr>

<tr>
<td height="39" colspan="2" style="background: #EDE2E6; border: solid
1px blue">FOOTER</td>
</tr>
</table>

</body>


... hope this helps



I tried using your example and still can't get it to work in ie7.

The top and bottom rows are still expanding and contracting as size of the
window changes.

They need to be fixed where only the middle row changes.

I also tried it changeing the "*" to "100%" and got the same result.

<table cellspacing="0" cellpadding="0" width="776" height="100%"
style="border: solid 1px red">
<tr>
<td height="20px" colspan="2" style="background: #FFFFFF; border: solid 1px
green">HEADING</td>
</tr>

<tr>
<td width="150" height="100%" style="margin:0 0 0 10; background: #EDE2E6;
border: solid 1px black">
Advantages<br>
Concerns<br>
</td>
<td height="100%" style="border: solid 1px yellow">This is faqs</td>
</tr>

<tr>
<td height="39px" colspan="2" style="background: #EDE2E6; border: solid 1px
blue">FOOTER</td>
</tr>
</table>

Thanks,

Tom

Andy


.

Relevant Pages

  • Re: Cant make table the size of the screen
    ... Bottom: the footer. ... This is faqs ... I tried changing the DTD to different settings but that didn't work. ...
    (alt.html)
  • Re: Cant make table the size of the screen
    ... Bottom: the footer. ... I tried changing the DTD to different settings but that didn't work. ... Here's an example with coloured borders so you can see the boundaries... ...
    (alt.html)
  • Cant make table the size of the screen
    ... Bottom: the footer. ... This is faqs ... I tried changing the DTD to different settings but that didn't work. ...
    (alt.html)
  • Newbie, want onclick to work, using Verizon sitebuilder
    ... Sometimes I update the HTML and save the file and nothing has ... undo the change, click "Done" again, and then it's changed. ... Does every page have to have a google search box? ... It started out at the bottom of the page ...
    (comp.lang.javascript)
  • Re: CSS Layout (Bottom of page)
    ... bottom of the 'page' instead of resizing to the bottom of the browser ... Here is a link to the CSS: ... you had been considerate and included the CSS in the head of the HTML ... PNG or Gif is a much more suitable image format than JPEG for the ...
    (comp.infosystems.www.authoring.stylesheets)