Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   ASP .Net (http://www.velocityreviews.com/forums/f29-asp-net.html)
-   -   Table Cell height 100% causes scroll?? (http://www.velocityreviews.com/forums/t119294-table-cell-height-100-causes-scroll.html)

jslaybaugh@gmail.com 02-09-2006 03:37 PM

Table Cell height 100% causes scroll??
 
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>


S. Justin Gengo [MCP] 02-09-2006 03:49 PM

Re: Table Cell height 100% causes scroll??
 
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
<jslaybaugh@gmail.com> wrote in message
news:1139499445.353252.109910@g44g2000cwa.googlegr 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>
>




Jonathan N. Little 02-09-2006 07:07 PM

Re: Table Cell height 100% causes scroll??
 
jslaybaugh@gmail.com 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

Neredbojias 02-09-2006 10:52 PM

Re: Table Cell height 100% causes scroll??
 
With neither quill nor qualm, jslaybaugh@gmail.com 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.

jslaybaugh@gmail.com 02-09-2006 11:25 PM

Re: Table Cell height 100% causes scroll??
 
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


Jonathan N. Little 02-10-2006 12:43 AM

Re: Table Cell height 100% causes scroll??
 
jslaybaugh@gmail.com 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

jslaybaugh@gmail.com 02-10-2006 03:51 AM

Re: Table Cell height 100% causes scroll??
 
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??



All times are GMT. The time now is 08:49 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.