Table Cell height 100% causes scroll??

Discussion in 'HTML' started by jslaybaugh@gmail.com, Feb 9, 2006.

  1. Guest

    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>
     
    , Feb 9, 2006
    #1
    1. Advertising

  2. 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
    <> wrote in message
    news:...
    > 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], Feb 9, 2006
    #2
    1. Advertising

  3. 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
     
    Jonathan N. Little, Feb 9, 2006
    #3
  4. Neredbojias Guest

    With neither quill nor qualm, 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.
     
    Neredbojias, Feb 9, 2006
    #4
  5. Guest

    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
     
    , Feb 9, 2006
    #5
  6. 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
     
    Jonathan N. Little, Feb 10, 2006
    #6
  7. Guest

    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??
     
    , Feb 10, 2006
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Xavier Osa
    Replies:
    0
    Views:
    641
    Xavier Osa
    Jan 9, 2004
  2. Replies:
    6
    Views:
    540
  3. Replies:
    0
    Views:
    845
  4. fred
    Replies:
    3
    Views:
    284
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    891
Loading...

Share This Page