[CSS] IE Table issue

Discussion in 'HTML' started by Thomas Scheffler, Jan 27, 2005.

  1. Hi,

    I currently try a table layout, as I canot come along with IE and a div
    layout. Now I have another issue with this browser.

    I have a table (MainTable) with 100% width and heigh. It covers the
    whole window though. It has a left column, that consist of a single row
    and so is 100% heigh, too.
    Now when I insert in this very cell another table. I cannot maximize it
    to 100%. I need another table in there because it needs a different
    layout, than in the right part of MainTable. Gecko based browser sizing
    the table correct to the height of the surrounding cell, ie doesn't. It
    just draws the table as no style is asigned.

    css:
    html, body, #maintable, .max {
    margin: 0px;
    height: 100%;
    width: 100%;
    }

    html:

    <html>
    <body>
    <table id="maintable">
    <tr>
    <td>
    <table class="max">
    <tr><td colspan="2">..</td></tr>
    <tr><td class="max">...</td>
    <td class="max">...</td>
    </tr>
    </table>
    </td>
    <td><!--the right cell of MainTable --></td>
    </tr>
    </body>
    </html>

    This is just to give you an idea. You can see, that the last row of
    nested table should be maximized. Why isn't that done in IE?
    Thank you for any help.

    Cheers Thomas
     
    Thomas Scheffler, Jan 27, 2005
    #1
    1. Advertising

  2. Thomas Scheffler

    Richard Guest

    On Thu, 27 Jan 2005 01:49:07 +0100 Thomas Scheffler wrote:

    > Hi,


    > I currently try a table layout, as I canot come along with IE and a div
    > layout. Now I have another issue with this browser.


    > I have a table (MainTable) with 100% width and heigh. It covers the
    > whole window though. It has a left column, that consist of a single row
    > and so is 100% heigh, too.
    > Now when I insert in this very cell another table. I cannot maximize it
    > to 100%. I need another table in there because it needs a different
    > layout, than in the right part of MainTable. Gecko based browser sizing
    > the table correct to the height of the surrounding cell, ie doesn't. It
    > just draws the table as no style is asigned.



    Instead of the second table, use tbody.
    This will act as a table within a table as you want.

    In css you could do the same thing with less.
    <div id="outer">
    <div id="inner" style="position:relative; left:50px; top:50px;"></div>
    </div>

    In this example, the inner division begins 50 pixexls (diagonally) from the
    top left corner of the outer division.
     
    Richard, Jan 27, 2005
    #2
    1. Advertising

  3. Richard wrote:

    > Instead of the second table, use tbody.
    > This will act as a table within a table as you want.


    Please go back to watching television. The WWW is too complicated for you.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Jan 27, 2005
    #3
  4. Thomas Scheffler

    Steve Pugh Guest

    Thomas Scheffler <> wrote:

    >I have a table (MainTable) with 100% width and heigh. It covers the
    >whole window though. It has a left column, that consist of a single row
    >and so is 100% heigh, too.
    >Now when I insert in this very cell another table. I cannot maximize it
    >to 100%. I need another table in there because it needs a different
    >layout, than in the right part of MainTable. Gecko based browser sizing
    >the table correct to the height of the surrounding cell, ie doesn't. It
    >just draws the table as no style is asigned.
    >
    >html, body, #maintable, .max {
    > margin: 0px;
    > height: 100%;
    > width: 100%;
    >}
    >
    ><table id="maintable">
    ><tr>
    > <td>
    > <table class="max">
    > <tr><td colspan="2">..</td></tr>
    > <tr><td class="max">...</td>
    > <td class="max">...</td>
    > </tr>
    > </table>
    > </td>
    > <td><!--the right cell of MainTable --></td>
    ></tr>



    Let's look at what height: 100% means in CSS. The least ambiguous
    definition is given in CSS 2.1 (and CSS 2.1 was written with current
    browser behaviour in mind so with luck it will be both theoretically
    and practically useful).

    "Specifies a percentage height. The percentage is calculated with
    respect to the height of the generated box's containing block. [...] A
    percentage height on the root element is relative to the viewport."
    http://www.w3.org/TR/CSS21/visudet.html#propdef-height

    So you've set the <html> element to the height of the viewport, the
    <body> element to the height of the <html> element and the #maintable
    table to the height of the <body>.

    IE applies the above rather short sightedly and because you haven't
    specified a height for the <td> that contains the .max table it
    interprets it as "100% of undefined" = "auto" = "determined by
    content".

    Adding height:100% to the cell that contains the inner table fixes the
    problem in IE. As IE doesn't support any of the useful selectors and
    as you don't want this 100% height to affect _all_ the cells in the
    inner table as well you'll need to use a class (or inline style).

    But a word of caution:
    "CSS 2.1 does not define what percentage values of 'height' refer to
    when specified for table cells."
    http://www.w3.org/TR/CSS21/tables.html#height-layout

    So it's possible that other/future browsers will interpret this height
    and the heights where you set class="max" on the inner cells in a
    different way.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jan 27, 2005
    #4
  5. Thomas Scheffler

    Steve Pugh Guest

    "Richard" <Anonymous@127.001> wrote:

    >Instead of the second table, use tbody.
    >This will act as a table within a table as you want.


    Idiot. tbody must be an immediate child of a table. You can not stick
    a body into a cell.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jan 27, 2005
    #5
  6. Steve Pugh schrieb:
    > Thomas Scheffler <> wrote:
    >
    >
    >>I have a table (MainTable) with 100% width and heigh. It covers the
    >>whole window though. It has a left column, that consist of a single row
    >>and so is 100% heigh, too.
    >>Now when I insert in this very cell another table. I cannot maximize it
    >>to 100%. I need another table in there because it needs a different
    >>layout, than in the right part of MainTable. Gecko based browser sizing
    >>the table correct to the height of the surrounding cell, ie doesn't. It
    >>just draws the table as no style is asigned.
    >>
    >>html, body, #maintable, .max {
    >> margin: 0px;
    >> height: 100%;
    >> width: 100%;
    >>}
    >>
    >><table id="maintable">
    >><tr>
    >> <td>
    >> <table class="max">
    >> <tr><td colspan="2">..</td></tr>
    >> <tr><td class="max">...</td>
    >> <td class="max">...</td>
    >> </tr>
    >> </table>
    >> </td>
    >> <td><!--the right cell of MainTable --></td>
    >></tr>

    >
    >
    >
    > Let's look at what height: 100% means in CSS. The least ambiguous
    > definition is given in CSS 2.1 (and CSS 2.1 was written with current
    > browser behaviour in mind so with luck it will be both theoretically
    > and practically useful).
    >
    > "Specifies a percentage height. The percentage is calculated with
    > respect to the height of the generated box's containing block. [...] A
    > percentage height on the root element is relative to the viewport."
    > http://www.w3.org/TR/CSS21/visudet.html#propdef-height
    >
    > So you've set the <html> element to the height of the viewport, the
    > <body> element to the height of the <html> element and the #maintable
    > table to the height of the <body>.
    >
    > IE applies the above rather short sightedly and because you haven't
    > specified a height for the <td> that contains the .max table it
    > interprets it as "100% of undefined" = "auto" = "determined by
    > content".
    >
    > Adding height:100% to the cell that contains the inner table fixes the
    > problem in IE.


    I had to asign this property also to the tr that contains the td. As you
    can see the nested table contains a row where each td is of class "max".
    The IE asigns the height of the table to this, which breaks the layout,
    because there is a row above them with a fixed height element in it
    (image). How do I tell IE to have the upper td (colspan=2) to shrink to
    that image and to maximize the lower cells, so that the whole table is
    100% of the surrounding cell. IE ignores the assignment of height to the
    upper tr and td. What should I do there? This seems to be a common
    problem for my layout. How do I tell (IE) to maximize a cell until the
    other affected cells are at mimimum size.

    > So it's possible that other/future browsers will interpret this height
    > and the heights where you set class="max" on the inner cells in a
    > different way.


    I'm already tortured by the current ones that I have to survive :eek:)
     
    Thomas Scheffler, Jan 27, 2005
    #6
    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. David Williams
    Replies:
    2
    Views:
    1,171
    Jacob Yang [MSFT]
    Aug 12, 2003
  2. Eric
    Replies:
    4
    Views:
    780
    clintonG
    Dec 24, 2004
  3. Replies:
    3
    Views:
    931
    richard
    Sep 24, 2006
  4. vitay
    Replies:
    8
    Views:
    573
    Stan McCann
    Nov 9, 2006
  5. Stephen Hatfield

    CSS Issue With User Control in an HTML Table

    Stephen Hatfield, Dec 13, 2005, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    167
Loading...

Share This Page