Problem with Explorer and simple rowspan usage

Discussion in 'HTML' started by William, Jan 14, 2007.

  1. William

    William Guest

    Hello all,

    I hope someone can help me. I got a problem where some table layout
    won't work the way it's supposed to work, using rowspan. It's hard to
    explain, but in the example I give you below, there's 3 TDs, the right
    and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
    and the first row should have 16 pixels, and second row whatever height
    the page requires. But it seems that depending on the left or right TD
    height, it affects the height of my middle top TD, which is supposed to
    be fixed at 16 pixels. Anyway, this example should explain it all. Is
    there a way to make that tow middle TD fixed at 16 pixels? It works fine
    with Firefox, but not with Explorer.


    <html>
    <head>
    </head>
    <body>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="100" rowspan="2">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    </td>
    </tr>
    </table>
    </td>
    <td width="900" height="16">Should always have 16 pixels height,
    but doesnt on Explorer</td>
    <td width="100" rowspan="2">bbbb</td>
    </tr>
    <tr>
    <td width="900">
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    <br>
    sahdfhs
    </td>
    </tr>
    </table>
    </body>
    </html>
     
    William, Jan 14, 2007
    #1
    1. Advertising

  2. William

    John Hosking Guest

    William wrote:
    > Hello all,
    >
    > I hope someone can help me. I got a problem where some table layout
    > won't work the way it's supposed to work, using rowspan.


    You mean it won't work the way you expect it to work.

    > It's hard to
    > explain, but in the example I give you below, there's 3 TDs, the right
    > and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
    > and the first row should have 16 pixels, and second row whatever height
    > the page requires. But it seems that depending on the left or right TD
    > height, it affects the height of my middle top TD, which is supposed to
    > be fixed at 16 pixels. Anyway, this example should explain it all. Is
    > there a way to make that tow middle TD fixed at 16 pixels? It works fine
    > with Firefox, but not with Explorer.
    >


    IE is *special*.

    [code snipped]

    Your third column is meaningless, and has no effect on this behavior.
    Likewise the inner table. The width settings are also irrelevant. You've
    really got a 2x2 table, with the first column spanning two rows:

    ------------
    ¦ A ¦ B ¦
    ¦ ¦ ¦
    ¦ ¦-----¦
    ¦ ¦ C ¦
    ¦ ¦ ¦
    ------------

    You've set a suggested minimum height on cell B. (I know you said
    "height", but IE treats it as a min-height.) As the content in A grows
    in length, B starts to grow in proportion in IE (in FF, B remains constant).

    (If you test without setting a height for B, FF gives the same height
    for B that we see in IE. Suggesting that FF takes height to be a maximum
    or exact height, while IE considers it a minimum.)

    Another variation, this one with only one row:

    ------------
    ¦ A ¦ B ¦
    ¦ ¦ ¦
    ¦ ¦ ¦
    ------------

    You've set a suggested minimum height on cell B. As the content in A
    grows in length, B starts to grow in proportion in IE and in FF. The
    behavior of cell B in this case seems more intuitive, because we expect
    the table to contain the data more than we expect the height
    specification for B to be respected.

    What we're left with is merely the fact that IE (6 and below; I'm not
    testing with 7 here*) treats height as min-height, while FF treats it as
    height. Sorry. That's IE for you.

    A workaround? Maybe using DIVs would suit your purposes just as well (or
    better). But I don't know how to beat it reliably using a table.

    * I don't know if that was changed for IE7.

    --
    John
     
    John Hosking, Jan 14, 2007
    #2
    1. Advertising

  3. William

    Roy A. Guest

    William skrev:
    > Hello all,
    >
    > I hope someone can help me. I got a problem where some table layout
    > won't work the way it's supposed to work, using rowspan. It's hard to
    > explain, but in the example I give you below, there's 3 TDs, the right
    > and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
    > and the first row should have 16 pixels, and second row whatever height
    > the page requires. But it seems that depending on the left or right TD
    > height, it affects the height of my middle top TD, which is supposed to
    > be fixed at 16 pixels. Anyway, this example should explain it all. Is
    > there a way to make that tow middle TD fixed at 16 pixels? It works fine
    > with Firefox, but not with Explorer.
    >
    >
    > <html>
    > <head>
    > </head>
    > <body>
    > <table border="0" cellpadding="0" cellspacing="0">
    > <tr>
    > <td width="100" rowspan="2">
    > <table border="0" cellpadding="0" cellspacing="0">
    > <tr>
    > <td>
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > </td>
    > </tr>
    > </table>
    > </td>
    > <td width="900" height="16">Should always have 16 pixels height,
    > but doesnt on Explorer</td>
    > <td width="100" rowspan="2">bbbb</td>
    > </tr>
    > <tr>
    > <td width="900">
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > <br>
    > sahdfhs
    > </td>
    > </tr>
    > </table>
    > </body>
    > </html>


    IE is unable to do it in that way, at least without MSHTML. In HTML it
    is not defined how row heights are calculated when a TD span more than
    one row. Diffrent browsers could render the table diffrently. Most
    browsers would do what you could expect, but some browsers may render
    it useless.

    The exact height of the rows could, as all ready pointet out, dependt
    one how you define the word 'height'.
     
    Roy A., Jan 14, 2007
    #3
  4. William wrote:
    > Hello all,
    >
    > I hope someone can help me. I got a problem where some table layout
    > won't work the way it's supposed to work, using rowspan. It's hard to
    > explain, but in the example I give you below, there's 3 TDs, the right
    > and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
    > and the first row should have 16 pixels, and second row whatever height
    > the page requires. But it seems that depending on the left or right TD
    > height, it affects the height of my middle top TD, which is supposed to
    > be fixed at 16 pixels. Anyway, this example should explain it all. Is
    > there a way to make that tow middle TD fixed at 16 pixels? It works fine
    > with Firefox, but not with Explorer.
    >
    >


    <snip code>

    In a nutshell your markup is stinks of using tables, nested even, for
    layout! Also what happen to the poor schmuck view your site with a old
    14" monitor, or low on the corporate-ladder laptop where the max screen
    resolution is 800x600? Your table is 1,100 pixels wide! Not sure why
    your dims are fixed in pixels, better proportional to the text, maybe
    for graphics, how know since <broken record>you have not supplied a
    URL</broken record> so we must guess. Here is a better way:

    <!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>More User Friendly</title>
    <style type="text/css">
    HTML, BODY { margin: 0; padding: 0; }
    /* margins on content to offset sidebars */
    .content { margin: 0 100px 0 100px; padding: 0; }

    /* background colors only to show layout! */
    .banner { height: 16px; background-color: #efe; }

    .sidebar { position: absolute; width: 100px; height: 100%;
    background-color: #fee; }
    .lefthand { top: 0; left: 0; }
    .righthand { top: 0; right: 0; }

    /* put nav links in lists */
    .sidebar UL { list-style: none; margin: 0; padding: 0; }
    .sidebar LI { margin: 0; }
    </style>
    </head>
    <body>

    <div class="sidebar righthand">
    right sidebar
    </div>

    <div class="sidebar lefthand">
    <ul>
    <li>Nav Link</li>
    <li>Nav Link</li>
    <li>Nav Link</li>
    <li>Nav Link</li>
    <li>Nav Link</li>
    </ul>
    </div>

    <div class="content">
    <div class="banner">Top banner</div>
    <h1>Your Page Content</h1>
    <p>
    Now the center section will scale
    with browser window, far better!
    </p>
    </div>
    </body>
    </html>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 14, 2007
    #4
  5. William

    William Guest

    Thanks for the explanation, I really appreciate and I guess now I
    understand that "height" in this situation is the minimum height, so I
    guess I'll have to go with another strategy :)

    ------
    William


    John Hosking wrote:
    > William wrote:
    >> Hello all,
    >>
    >> I hope someone can help me. I got a problem where some table layout
    >> won't work the way it's supposed to work, using rowspan.

    >
    > You mean it won't work the way you expect it to work.
    >
    >>

    >
    > IE is *special*.
    >
    > [code snipped]
    >
    > Your third column is meaningless, and has no effect on this behavior.
    > Likewise the inner table. The width settings are also irrelevant. You've
    > really got a 2x2 table, with the first column spanning two rows:
    >
    > ------------
    > ¦ A ¦ B ¦
    > ¦ ¦ ¦
    > ¦ ¦-----¦
    > ¦ ¦ C ¦
    > ¦ ¦ ¦
    > ------------
    >
    > You've set a suggested minimum height on cell B. (I know you said
    > "height", but IE treats it as a min-height.) As the content in A grows
    > in length, B starts to grow in proportion in IE (in FF, B remains
    > constant).
    >
    > (If you test without setting a height for B, FF gives the same height
    > for B that we see in IE. Suggesting that FF takes height to be a maximum
    > or exact height, while IE considers it a minimum.)
    >
    > Another variation, this one with only one row:
    >
    > ------------
    > ¦ A ¦ B ¦
    > ¦ ¦ ¦
    > ¦ ¦ ¦
    > ------------
    >
    > You've set a suggested minimum height on cell B. As the content in A
    > grows in length, B starts to grow in proportion in IE and in FF. The
    > behavior of cell B in this case seems more intuitive, because we expect
    > the table to contain the data more than we expect the height
    > specification for B to be respected.
    >
    > What we're left with is merely the fact that IE (6 and below; I'm not
    > testing with 7 here*) treats height as min-height, while FF treats it as
    > height. Sorry. That's IE for you.
    >
    > A workaround? Maybe using DIVs would suit your purposes just as well (or
    > better). But I don't know how to beat it reliably using a table.
    >
    > * I don't know if that was changed for IE7.
    >
     
    William, Jan 14, 2007
    #5
  6. William

    William Guest

    Thanks a lot for the tips, I won't be using height with rowspan I guess :)


    ------
    William

    Roy A. wrote:
    > William skrev:
    >> Hello all,
    >>
    >> I hope someone can help me. I got a problem where some table layout
    >> won't work the way it's supposed to work, using rowspan. It's hard to
    >> explain, but in the example I give you below, there's 3 TDs, the right
    >> and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
    >> and the first row should have 16 pixels, and second row whatever height
    >> the page requires. But it seems that depending on the left or right TD
    >> height, it affects the height of my middle top TD, which is supposed to
    >> be fixed at 16 pixels. Anyway, this example should explain it all. Is
    >> there a way to make that tow middle TD fixed at 16 pixels? It works fine
    >> with Firefox, but not with Explorer.

    >
    > IE is unable to do it in that way, at least without MSHTML. In HTML it
    > is not defined how row heights are calculated when a TD span more than
    > one row. Diffrent browsers could render the table diffrently. Most
    > browsers would do what you could expect, but some browsers may render
    > it useless.
    >
    > The exact height of the rows could, as all ready pointet out, dependt
    > one how you define the word 'height'.
    >
     
    William, Jan 14, 2007
    #6
  7. William

    William Guest

    Thanks Jonathan,

    My site can't have a middle area with an unfixed width as it would
    change the current design and would not look nice on some resolutions.
    We want the site to work on 1024x768 resolutions or more, so the design
    needs to be centered and fixed. But the example you gave me is a great
    resource for me as I did not know you could layout pages this way using
    divs and css positioning the way you do. I will keep this example with
    me and experiment with it. Thanks a lot.


    ------
    William

    Jonathan N. Little wrote:
    > William wrote:
    >> Hello all,
    >>
    >> I hope someone can help me. I got a problem where some table layout
    >> won't work the way it's supposed to work, using rowspan. It's hard to
    >> explain, but in the example I give you below, there's 3 TDs, the right
    >> and left TD have a rowspan of 2, and the middle TD have a rowspan of
    >> 1, and the first row should have 16 pixels, and second row whatever
    >> height the page requires. But it seems that depending on the left or
    >> right TD height, it affects the height of my middle top TD, which is
    >> supposed to be fixed at 16 pixels. Anyway, this example should explain
    >> it all. Is there a way to make that tow middle TD fixed at 16 pixels?
    >> It works fine with Firefox, but not with Explorer.
    >>
    >>

    >
    > <snip code>
    >
    > In a nutshell your markup is stinks of using tables, nested even, for
    > layout! Also what happen to the poor schmuck view your site with a old
    > 14" monitor, or low on the corporate-ladder laptop where the max screen
    > resolution is 800x600? Your table is 1,100 pixels wide! Not sure why
    > your dims are fixed in pixels, better proportional to the text, maybe
    > for graphics, how know since <broken record>you have not supplied a
    > URL</broken record> so we must guess. Here is a better way:
    >
     
    William, Jan 14, 2007
    #7
  8. William

    Roy A. Guest

    William skrev:

    > Is
    > there a way to make that tow middle TD fixed at 16 pixels? It works fine
    > with Firefox, but not with Explorer.


    You could use somthing like this:

    <table style="table-layout:fixed" width="100%" border="0"
    cellpadding="0" cellspacing="0">
    <tr>
    <td width="100"> </td>
    <td width="100%">
    <div class="top" style="height:16px">16 pixels height</div>
    <h1>Content</h1>
    <p>sahdfhs</p>
    </td>
    <td width="100">bbbb</td>
    </table>
     
    Roy A., Jan 14, 2007
    #8
  9. William wrote:
    > Thanks Jonathan,
    >
    > My site can't have a middle area with an unfixed width as it would
    > change the current design and would not look nice on some resolutions.
    > We want the site to work on 1024x768 resolutions or more, so the design
    > needs to be centered and fixed.


    What possible reason would *require* a 1024x768? Your realize that (a)
    Not everybody runs monitor resolutions > 800x600, (b)use their browser
    MAXIMIZED, I rarely do, (3)can guarantee what font or font-size your
    visitor will be using which can destroy a pixel-perfect layout!

    > But the example you gave me is a great
    > resource for me as I did not know you could layout pages this way using
    > divs and css positioning the way you do. I will keep this example with
    > me and experiment with it. Thanks a lot.


    Table were used 10 years ago (nearly an eon in tech-years) as a hack
    before stylesheets...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 14, 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. Eric
    Replies:
    4
    Views:
    2,650
  2. Bruce W...1

    colspan and rowspan problems

    Bruce W...1, Oct 22, 2003, in forum: HTML
    Replies:
    2
    Views:
    3,314
    Jerry Perkins
    Oct 22, 2003
  3. Klaus Wertler

    Colspan and rowspan

    Klaus Wertler, Nov 25, 2003, in forum: HTML
    Replies:
    8
    Views:
    1,449
    Sid Ismail
    Nov 27, 2003
  4. Martin Fuchs

    Problem with td rowspan

    Martin Fuchs, Dec 30, 2003, in forum: HTML
    Replies:
    8
    Views:
    903
    Martin Fuchs
    Dec 30, 2003
  5. Replies:
    13
    Views:
    997
    dorayme
    Oct 31, 2008
Loading...

Share This Page