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. Advertising

  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. Advertising

  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. 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. Jeff Louella

    IE7 on XP vs IE7 on Vista

    Jeff Louella, Mar 1, 2007, in forum: HTML
    Replies:
    9
    Views:
    519
    Adrienne Boswell
    Mar 2, 2007
  2. =?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:
    744
    =?Utf-8?B?SmVycnkgQw==?=
    Oct 30, 2007
  3. Replies:
    1
    Views:
    2,725
    Adrienne Boswell
    Sep 24, 2008
  4. john T
    Replies:
    7
    Views:
    227
    Richard Formby
    Feb 19, 2004
  5. Dag Sunde
    Replies:
    2
    Views:
    141
    Dag Sunde
    Dec 20, 2006
Loading...

Share This Page