Table Cell height 100% causes scroll??

J

jslaybaugh

I'm working on an ASP.NET 2.0 application and am having trouble with a
very simple table layout. Using ASP.NET 2.0 it defaults to XHTML 1.0
Transitional and I am trying to comply. However, I cannot seem to get
my table to render properly, so I pulled out all the server controls
and just made a very simple HTML only page and am having the same
problem still.

The problem can bee seen in the code below. The top row is 100px high
and the bottom row is 100% high. The problem comes in that it actually
creates a table that is 100% + 100px high. This causes vertical
scroll.

Of course, this doesnt happen if i remove the !DOCTYPE declaration, but
I would really like to comply to the XHTML standard.

Can anyone help me???

<!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"
style="height:100%;width:100%;margin:0;" >
<body style="width:100%;height:100%;margin:0;">
<table style="height:100%;width:100%;" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td style="height:100px;width:100%;">text<br />text<br
/>text</td>
</tr>
<tr>
<td style="height:100%;width:100%;">text</td>
</tr>
</table>
</body>
</html>
 
J

Jonathan N. Little

I'm working on an ASP.NET 2.0 application and am having trouble with a
very simple table layout. Using ASP.NET 2.0 it defaults to XHTML 1.0
Transitional and I am trying to comply. However, I cannot seem to get
my table to render properly, so I pulled out all the server controls
and just made a very simple HTML only page and am having the same
problem still.

The problem can bee seen in the code below. The top row is 100px high
and the bottom row is 100% high. The problem comes in that it actually
creates a table that is 100% + 100px high. This causes vertical
scroll.

Of course, this doesnt happen if i remove the !DOCTYPE declaration, but
I would really like to comply to the XHTML standard.

Can anyone help me???

<!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"
style="height:100%;width:100%;margin:0;" >
<body style="width:100%;height:100%;margin:0;">
<table style="height:100%;width:100%;" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td style="height:100px;width:100%;">text<br />text<br
/>text</td>
</tr>
<tr>
<td style="height:100%;width:100%;">text</td>
</tr>
</table>
</body>
</html>
Click to expand...

Try viewing in another browser *other than* MSIE
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
I'm working on an ASP.NET 2.0 application and am having trouble with a
very simple table layout. Using ASP.NET 2.0 it defaults to XHTML 1.0
Transitional and I am trying to comply. However, I cannot seem to get
my table to render properly, so I pulled out all the server controls
and just made a very simple HTML only page and am having the same
problem still.

The problem can bee seen in the code below. The top row is 100px high
and the bottom row is 100% high. The problem comes in that it actually
creates a table that is 100% + 100px high. This causes vertical
scroll.

Of course, this doesnt happen if i remove the !DOCTYPE declaration, but
I would really like to comply to the XHTML standard.

Can anyone help me???

<!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"
style="height:100%;width:100%;margin:0;" >
<body style="width:100%;height:100%;margin:0;">
<table style="height:100%;width:100%;" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td style="height:100px;width:100%;">text<br />text<br
/>text</td>
</tr>
<tr>
<td style="height:100%;width:100%;">text</td>
</tr>
</table>
</body>
</html>
Click to expand...

Why do you put a height on the bottom "row" at all?
 
J

jslaybaugh

Thanks for everyone's quick replies. Sorry I didnt get back to it till
the end of the day. I have tried everyone's suggestions, and here are
the results:
Have you tried a height of 99%?
Click to expand...

Yes, at my current resolution, I have to take it all the way down to
80% in order to make up for the 100px it is off by. If I scale the
window down, I have to go as low as 70%. Seems like there is a better
workaround.
Try viewing in another browser *other than* MSIE
Click to expand...

Of course, it works perfectly in Firefox, but all the users of this
application will be MSIE 6.0 users, so I need a more universal
"standard" solution.
Why do you put a height on the bottom "row" at all?
Click to expand...

If I take the bottom row height attribute out, the table is all messed
up on MSIE. The top row becomes huge and the bottom row becomes small.
Almost exactly opposite what I want. (although not exactly opposite,
because if I try the opposite scenario--not putting a height attribute
on the top row--it still doesnt work). Of course, again in Firefox, it
works great if I remove the height attribute off the bottom row, but I
need a solution for MSIE as I mentioned before.

Thanks for the suggestions, but I'm still stuck here....any other
ideas????

Jorin
 
J

Jonathan N. Little

If I take the bottom row height attribute out, the table is all messed
up on MSIE. The top row becomes huge and the bottom row becomes small.
Almost exactly opposite what I want. (although not exactly opposite,
because if I try the opposite scenario--not putting a height attribute
on the top row--it still doesnt work). Of course, again in Firefox, it
works great if I remove the height attribute off the bottom row, but I
need a solution for MSIE as I mentioned before.

Thanks for the suggestions, but I'm still stuck here....any other
ideas????
Click to expand...

If I had to guess here, I bet this is important because the table
doesn't contain tabular data but your layout. Simple solution is don't,
just loose the table!

STYLE:
BODY {
margin: 0;
padding: 0;
}
..banner {
height: 100px: margin: 0;
...[whatever else you want to style ]
}

HTML:
....
<body>
<div class="banner">text in the upper part</div>
<p>
Every thing else regardless how much you put here...
</p>
</body>
</html>
 
J

jslaybaugh

Thanks again for another suggestion, however we still have a problem.
I didnt go into this much detail at first, because I was having the
problem even in the simple scenario I mentioned above, but inside my
bottom "row" that is supposed to fill the height, I am going to have a
table that splits that bottom row vertically about 60/40 and put an
iFrame in the right half. So, since I want this iFrame to fill the
height of its container (as the box model suggests all of this should
work), I need that bottom area to fill the remaining height.

-----------------------------------
| header |
-----------------------------------
| ^ | |
| 100% | iframe |
| v | |
-----------------------------------

I did try to remove the tables altogether since that apparently is bad
design nowadays, and this i still have the same problem. The
simplified HTML can be seen below:

<!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"
style="height:100%;width:100%;margin:0;padding:0;" >
<body style="width:100%;height:100%;margin:0;padding:0;">
<div
style="height:100%;width:100%;margin:0;border:none;padding:0;">
<div
style="height:100px;width:100%;margin:0;border:none;padding:0;">text<br
/>text<br />text</div>
<div
style="height:100%;width:100%;margin:0;border:none;padding:0;">text<br
/>text<br />text</div>
</div>
</body>
</html>

If you create that file, you'll still have vertical scroll in MSIE.

Thanks, though! Any other ideas??
 

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
How to wrap <td> content . 16
Can't make table the size of the screen 12
Help with code 0
Table height inside form 2
Help with Visual Lightbox: Scripts 2
Having trouble centering contents of td ? 3
SendGrid email issue in responsive Gmail 1

Members online

No members online now.
Total: 23 (members: 0, guests: 23)
Robots: 193

Forum statistics

Threads
473,764
Messages
2,569,565
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top