|
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> |
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> > |
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 |
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. |
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 |
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 |
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 06:54 AM. |
Powered by vBulletin®. Copyright ©2000 - 2013, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.