Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Table Cell height 100% causes scroll??

Reply
Thread Tools

Table Cell height 100% causes scroll??

 
 
jslaybaugh@gmail.com
Guest
Posts: n/a
 
      02-09-2006
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>

 
Reply With Quote
 
 
 
 
S. Justin Gengo [MCP]
Guest
Posts: n/a
 
      02-09-2006
Jay,

Have you tried a height of 99%?

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche
<(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
> 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>
>



 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-09-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> 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>
>


Try viewing in another browser *other than* MSIE

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      02-09-2006
With neither quill nor qualm, (E-Mail 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>


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

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
jslaybaugh@gmail.com
Guest
Posts: n/a
 
      02-09-2006
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%?


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


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?


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

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-10-2006
(E-Mail Removed) wrote:
<snip>
> 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????


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>
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
jslaybaugh@gmail.com
Guest
Posts: n/a
 
      02-10-2006
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:non e;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??

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Tetration (print 100^100^100^100^100^100^100^100^100^100^100^100^100^100) jononanon@googlemail.com C Programming 5 04-25-2012 08:49 PM
table in table -> 100% height does not work Paul Schmidinger HTML 3 03-24-2011 03:47 PM
Control (in table cell) with a width of 100% causes the end of the control to be clipped - ASP.NET 2.0 jwwishart@gmail.com ASP .Net 0 06-21-2006 11:48 PM
Table Cell height 100% causes scroll?? jslaybaugh@gmail.com ASP .Net 6 02-10-2006 03:51 AM
100% TABLE + 100% ROW + 100% DIV..? fred Javascript 3 03-17-2005 04:25 AM



Advertisments