Table height issue in IE7

Discussion in 'HTML' started by leodippolito@gmail.com, Feb 12, 2007.

  1. Guest

    Hi there,

    I have this code:

    ---

    <!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" >
    <head>
    <title>Test</title>

    <style type="text/css">
    html, body
    {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    width: 100%;
    }
    </style>

    </head>
    <body>

    <table id="mainTable" cellpadding="0" cellspacing="0"
    style="height: 100%; width: 100%;">

    <tr id="header" style="height: 60px;">
    <td style="background-color: yellow;">header</td>
    </tr>

    <tr id="contents" style="height: 100%;">
    <td style="background-color: red;">contents</td>
    </tr>

    <tr id="footer" style="height: 60px;">
    <td style="background-color: blue;">footer</td>
    </tr>

    </table>

    </body>
    </html>

    ---

    It works fine in Firefox (I have a table with the maximum screen
    height and no scrollbars).

    In IE7 I get a vertical scrollbar and the table looks larger (in
    height) than it should be.

    I don't understand.... What am I doing wrong?

    How can I have the same Firefox appearence in IE7?

    Thanks!
     
    , Feb 12, 2007
    #1
    1. Advertisements

  2. wrote:
    > Hi there,
    >
    > I have this code:

    <snip code>
    >
    > ---
    >
    > It works fine in Firefox (I have a table with the maximum screen
    > height and no scrollbars).
    >
    > In IE7 I get a vertical scrollbar and the table looks larger (in
    > height) than it should be.
    >
    > I don't understand.... What am I doing wrong?
    >
    > How can I have the same Firefox appearence in IE7?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>Dump The Table</title>

    <style type="text/css">
    HTML, BODY {
    background-color: #fee;
    margin: 0;
    padding: 0;
    }
    #header {
    background-color: #ffe;
    height: 60px;
    width: 100%
    }
    #contents {
    margin: 0 1em 60px 1em;
    }
    #footer {
    background-color: #eef;
    height: 60px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    }
    </style>
    </head>
    <body>
    <div id="header">Header Here</div>
    <div id="contents">
    <h1>Dump The Table</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing ...
    </p>
    </div>
    <div id="footer">Footer Here</div>
    </body>
    </html>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 12, 2007
    #2
    1. Advertisements

  3. Scripsit :

    > I have this code:


    Why don't we have your URL?

    > <table id="mainTable" cellpadding="0" cellspacing="0"
    > style="height: 100%; width: 100%;">

    - -
    > <tr id="contents" style="height: 100%;">

    - -
    > In IE7 I get a vertical scrollbar and the table looks larger (in
    > height) than it should be.


    You have asked for a 100% height for the <tr>, so what should a browser do
    when there are other rows as well? How can it make 60px + 100% + 60px equal
    100%?

    Omitting that height setting does not help, though. It removes the vertical
    scrollbar, but the row heights get a bit wild. IE is not very clever with
    tables. So use just CSS with <div> elements as Jonathan suggested.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Feb 12, 2007
    #3
  4. wrote :
    > Hi there,
    >
    > I have this code:
    >


    Please, post an url, not a whole webpage code.

    > ---
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >


    Why not choose a strict DTD? This is obviously a brand new page.


    > <html xmlns="http://www.w3.org/1999/xhtml" >
    > <head>
    > <title>Test</title>
    >
    > <style type="text/css">
    > html, body
    > {
    > margin: 0;
    > padding: 0;
    > border: 0;
    > height: 100%;
    > width: 100%;


    By default, both html and body are display: block with width and height
    set to auto. What you do is the start of a constrained design and not a
    scalable, fluid design.

    > }
    > </style>
    >
    > </head>
    > <body>
    >
    > <table id="mainTable" cellpadding="0" cellspacing="0"
    > style="height: 100%; width: 100%;">
    >
    > <tr id="header" style="height: 60px;">
    > <td style="background-color: yellow;">header</td>
    > </tr>
    >


    You are using a table construction for layout. That is also not
    recommendable.

    > <tr id="contents" style="height: 100%;">
    > <td style="background-color: red;">contents</td>
    > </tr>
    >


    Your table is over-constrained here: the height of this table row can
    not be 100% while the first one, at your request, is taking 60px.

    > <tr id="footer" style="height: 60px;">
    > <td style="background-color: blue;">footer</td>
    > </tr>
    >
    > </table>
    >
    > </body>
    > </html>
    >
    > ---
    >
    > It works fine in Firefox (I have a table with the maximum screen
    > height and no scrollbars).


    No. What you see is the rendering after browser handled your design errors.


    > In IE7 I get a vertical scrollbar and the table looks larger (in
    > height) than it should be.


    No. 60px + 100% + 60px != 100%


    > I don't understand.... What am I doing wrong?
    >
    > How can I have the same Firefox appearence in IE7?
    >
    > Thanks!


    I recommend you read some of the provided linked-resources:

    Table-based webpage design versus CSS-based webpage design: resources,
    explanations and tutorials
    http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

    and you can pick a CSS tablefree webpage template here:

    http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources.html#CSSWebpageTemplates

    What Jukka K. and Jonathan L. replied to you is correct, excellent and
    meeting your post.

    GĂ©rard
    --
    Using Web Standards in your Web Pages (Updated Feb. 2007)
    http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
     
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Feb 12, 2007
    #4
  5. dorayme Guest

    In article <b80f4$45d09d48$40cba7ac$>,
    "Jonathan N. Little" <> wrote:

    > wrote:
    > > Hi there,
    > >
    > > I have this code:

    > <snip code>
    > >
    > > ---
    > >
    > > It works fine in Firefox (I have a table with the maximum screen
    > > height and no scrollbars).
    > >
    > > In IE7 I get a vertical scrollbar and the table looks larger (in
    > > height) than it should be.
    > >
    > > I don't understand.... What am I doing wrong?
    > >
    > > How can I have the same Firefox appearence in IE7?

    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    > <meta http-equiv="content-language" content="en-us">
    >
    > <title>Dump The Table</title>
    >
    > <style type="text/css">
    > HTML, BODY {
    > background-color: #fee;
    > margin: 0;
    > padding: 0;
    > }
    > #header {
    > background-color: #ffe;
    > height: 60px;
    > width: 100%
    > }
    > #contents {
    > margin: 0 1em 60px 1em;
    > }
    > #footer {
    > background-color: #eef;
    > height: 60px;
    > width: 100%;
    > position: absolute;
    > left: 0;
    > bottom: 0;
    > }
    > </style>
    > </head>
    > <body>
    > <div id="header">Header Here</div>
    > <div id="contents">
    > <h1>Dump The Table</h1>
    > <p>
    > Lorem ipsum dolor sit amet, consectetuer adipiscing ...
    > </p>
    > </div>
    > <div id="footer">Footer Here</div>
    > </body>
    > </html>


    If OP is going from tables to this sort of thing, surely better
    is:

    #footer {background-color: #eef;}

    or even

    #footer {

    background-color: #eef;
    text-align; center;
    }

    depending on how he wants it...

    --
    dorayme
     
    dorayme, Feb 12, 2007
    #5
  6. dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article <b80f4$45d09d48$40cba7ac$>,
    > "Jonathan N. Little" <> wrote:
    >
    > > wrote:
    > > > Hi there,
    > > >

    >
    > If OP is going from tables to this sort of thing, surely better
    > is:
    >
    > #footer {background-color: #eef;}
    >
    > or even
    >
    > #footer {
    >
    > background-color: #eef;
    > text-align; center;
    > }
    >
    > depending on how he wants it...


    oops... this is mostly stupid of me in this context. Sorry. Let
    me point out the perhaps better thought behind my saying this:

    If a browser window is not very high or the text is user enlarged
    and the user scrolls to the bottom, he/she is in for a surpise
    with the footer intruding into the content in an ugly way. Better
    to either not so design or sophisticate up (there are things
    about this problem but I gave up on what I saw and just avoid the
    construction because I have never seen a non headache making
    cross browser solution.

    --
    dorayme
     
    dorayme, Feb 12, 2007
    #6
  7. Roy A. Guest

    On 12 Feb, 16:38, wrote:
    > I have this code:
    >
    > <snip>
    >
    > It works fine in Firefox (I have a table with the maximum screen
    > height and no scrollbars).
    >
    > In IE7 I get a vertical scrollbar and the table looks larger (in
    > height) than it should be.
    >
    > I don't understand.... What am I doing wrong?


    "CSS2 does not define what percentage values of 'height' refer to when
    specified for table cells."

    http://www.w3.org/TR/REC-CSS2/tables.html#height-layout

    > How can I have the same Firefox appearence in IE7?


    You can't have the Firefox experience in IE7, so I don't know what
    you're trying to archive. If you insist on using tables, you could try
    something like this:

    <head>
    <title>Let it flow</title>
    <style type="text/css">
    html, body {
    margin: 0; padding: 0; border: 0;
    height: 100%; width: 100%
    }
    .main { background-color: #FF9999; height: 100%; width: 100% }
    .header { height: 60px; background-color: #ffff99 }
    .contents { background-color: #FF9999 }
    .footer { height: 60px; background-color: #6699ff }
    </style>
    </head>
    ....
    <body>
    <table class="main" cellpadding="0" cellspacing="0">
    <tr>
    <td style="vertical-align: top">
    <div class="header">header</div>
    <div class="contents">contents</div>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: bottom">
    <div class="footer">footer</div>
    </td>
    </tr>
    </table>
    </body>
     
    Roy A., Feb 13, 2007
    #7
  8. Guest

    I appreciate all the replies.

    I am developing an ASP.NET application that uses webparts.

    Webpart's are server controls (from Microsoft) that render as tables
    in the browser.

    So I can't use DIV's. Because I can't change the way the webparts are
    rendered to the browser, this is Microsoft code.

    I am just trying to understand how 100% table height works in
    standards mode (IE7).

    I'll do more tests and see how it goes.

    Thanks again
     
    , Feb 13, 2007
    #8
  9. wrote:
    > I appreciate all the replies.
    >
    > I am developing an ASP.NET application that uses webparts.
    >
    > Webpart's are server controls (from Microsoft) that render as tables
    > in the browser.


    You have no control over what elements are used?
    >
    > So I can't use DIV's. Because I can't change the way the webparts are
    > rendered to the browser, this is Microsoft code.


    Hmm, Microsoft.

    >
    > I am just trying to understand how 100% table height works in
    > standards mode (IE7).


    Does 'MS!=Valid Markup' always have to be the rule?

    > I'll do more tests and see how it goes.
    >
    > Thanks again
    >



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 13, 2007
    #9
    1. Advertisements

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. TheXenocide
    Replies:
    3
    Views:
    6,641
    =?Utf-8?B?ZV96dmVyZXY=?=
    Jan 17, 2006
  2. Paul Schmidinger

    table in table -> 100% height does not work

    Paul Schmidinger, Aug 10, 2004, in forum: HTML
    Replies:
    3
    Views:
    3,171
    roma1123
    Mar 24, 2011
  3. TheXenocide
    Replies:
    2
    Views:
    3,500
    kchayka
    Oct 28, 2005
  4. Jeff Louella

    IE7 on XP vs IE7 on Vista

    Jeff Louella, Mar 1, 2007, in forum: HTML
    Replies:
    9
    Views:
    780
    Adrienne Boswell
    Mar 2, 2007
  5. =?Utf-8?B?SmVycnkgQw==?=

    iframe ie7 and height setting not working

    =?Utf-8?B?SmVycnkgQw==?=, Oct 29, 2007, in forum: ASP .Net
    Replies:
    4
    Views:
    993
    =?Utf-8?B?SmVycnkgQw==?=
    Oct 30, 2007
  6. Replies:
    1
    Views:
    2,951
    Adrienne Boswell
    Sep 24, 2008
  7. john T
    Replies:
    7
    Views:
    467
    Richard Formby
    Feb 19, 2004
  8. Dag Sunde
    Replies:
    2
    Views:
    256
    Dag Sunde
    Dec 20, 2006
Loading...