Can't make table the size of the screen

T

tshad

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
 
N

Neredbojias

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.
Click to expand...

Set the table to 100% height and the top & bottom rows to 1px height.
 
D

dorayme

<[email protected]
m>,
tshad said:
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.
Click to expand...

But it does not work fine in? You forgot to say?
 
T

tshad

I also find that it works on Safari as well. Both Safari and FireFox have
the table left justified, which is easily fixed.

I assume that both use the same engines.

Tom
 
D

dorayme

"tshad said:
I also find that it works on Safari as well. Both Safari and FireFox have
the table left justified, which is easily fixed.
Click to expand...

Try to post a URL. If you do not know why you are using the
doctype you use, use 4.01 Strict instead. Don't comment out
things so much so what you are trying to do can be seen. And what
is the div wrapper for exactly?
 
T

tshad

dorayme said:
Try to post a URL. If you do not know why you are using the
doctype you use, use 4.01 Strict instead. Don't comment out
things so much so what you are trying to do can be seen. And what
is the div wrapper for exactly?
Click to expand...

I don't have a web site to post it from.

I did try 4.01 Strict and got the same result.

Isn't that:

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

The 1st div actually has the background behind the table.

The 2nd div has the image that is in the 1st row. That is surrounded by the
another Div to put a white background behind the image. I am fading the
image and the dark background makes it hard to see the image - so the white
background fixes that.

This was stripped down to the bare minimum to try to find out why the table
wasn't working correctly.

Thanks,

Tom
 
D

dorayme

"tshad said:
I don't have a web site to post it from.
Click to expand...

If you are able to post to usenet, you must be on the internet
and your ISP (if you have one) might well allow you some free
server space to put up a page or three. If you do not have an
ISP, you can still get free server space, there are a few,
"tripod.com" is one I think and there are plenty of others. It is
really best to see your effort via a server.

I did try 4.01 Strict and got the same result.
Click to expand...

That is OK. I was not suggesting it solved all your problems.
The 1st div actually has the background behind the table.
Click to expand...

But all you have is

<div style="height: 100%;">

Where is the background?

Why is it needed anyway when the table itself can be given a
background?
The 2nd div has the image that is in the 1st row. That is surrounded by the
another Div to put a white background behind the image. I am fading the
image and the dark background makes it hard to see the image - so the white
background fixes that.
Click to expand...

You mean:

<td style="height:90px">
<div style=" background-color:White">
<!-- <div id="headerImg" class="width"></div>
--> </div>
</td>


The cell can be given a background, why do you need an extra div
to do it?
This was stripped down to the bare minimum to try to find out why the table
wasn't working correctly.
Click to expand...

Why do you really need a table within a table? Why exactly?
 
A

Andy

tshad said:
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
Click to expand...


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


Andy
 
N

Neredbojias

I don't have a web site to post it from.

I did try 4.01 Strict and got the same result.

Isn't that:

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

The 1st div actually has the background behind the table.

The 2nd div has the image that is in the 1st row. That is surrounded
by the another Div to put a white background behind the image. I am
fading the image and the dark background makes it hard to see the
image - so the white background fixes that.

This was stripped down to the bare minimum to try to find out why the
table wasn't working correctly.
Click to expand...

If you REALLY want it to work in ie7, you'll have to use Quirks mode.
Ie7 is broken. This is generally frowned upon but since you'd need it
to stretch the div in some browsers, anyway, you may as well do it. I
got it to work the way you want, identically, in ALL browsers in about
half-an-hour. One additional hint: the (inner) border is a prob; put
it on the <td>.
 
T

tshad

Andy said:
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
Click to expand...

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
 
D

dorayme

Maybe adapt the following:

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

<html>
<head>
<title>title</title>
<style type="text/css">

html, body {height: 100%;}

body {margin: 0;}

#header {height:100px;}

#container {
margin: 0 auto -100px auto;;
height:100%;
}

#footer {height:100px;}

#content {
position: absolute;
top: 100px;
bottom: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div id="container" style="background-color: #ccc;">
<div id="header" style="background-color: #ccf;">
Header
</div>
<div id="content">
Content
</div>
</div>
<div id="footer" style="background-color:yellow;">
Footer
</div>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Image shifts to the right when export the page to pdf 4
Filter table rows based on multiple checkboxes value 2
Having trouble centering contents of td ? 3
HTML Table Issue 1
Only one table shows up with the information 2
Help with Visual Lightbox: Scripts 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 21 (members: 1, guests: 20)
Robots: 434

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top