How to get IE6 to respect <td> height attribute?

Discussion in 'HTML' started by Danny, Feb 23, 2004.

  1. Danny

    Danny Guest

    In the following example, the "blue" cells will actually contain a
    background image and I'd like them to be 50 pixels high. The middle
    column contains text. I'd like the "red" cells to expand to fill
    whatever height the text takes the table to. However, IE6 does not
    respect the height="50" on the blue cells. It allocates the majority
    of the height to the blue cells - using what algorithm I'm not sure:

    <table width="500" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100" height="50" bgcolor="blue">&nbsp;</td>
    <td rowspan="2" width="300">blah di blah di blah di blah blah
    blah. blah di blah di blah
    di blah blah blah. blah di blah di blah di blah blah blah. blah
    di blah
    di blah di blah blah blah. blah di blah di blah di blah blah
    blah. blah
    di blah di blah di blah blah blah. blah di blah di blah di blah
    blah blah.
    blah di blah di blah di blah blah blah. blah di blah di blah di
    blah blah
    blah. blah di blah di blah di blah blah blah. </td>
    <td width="300" height="50" bgcolor="blue">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="red">&nbsp;</td>
    <td bgcolor="red">&nbsp;</td>
    </tr>
    </table>

    Mozilla 1.5 handles this fine.

    I've tried assigning the height of the blue cells with CSS, to no
    effect. Any way to bludgeon IE into obedience? Or do I have to abandon
    the table and use <div>s?
     
    Danny, Feb 23, 2004
    #1
    1. Advertising

  2. Danny

    Els Guest

    Danny wrote:

    > In the following example, the "blue" cells will actually contain a
    > background image and I'd like them to be 50 pixels high. The middle
    > column contains text. I'd like the "red" cells to expand to fill
    > whatever height the text takes the table to. However, IE6 does not
    > respect the height="50" on the blue cells. It allocates the majority
    > of the height to the blue cells - using what algorithm I'm not sure:
    >
    > <table width="500" border="0" cellspacing="0" cellpadding="0">
    > <tr>
    > <td width="100" height="50" bgcolor="blue">&nbsp;</td>
    > <td rowspan="2" width="300">blah di blah di blah di blah blah
    > blah. blah di blah di blah
    > di blah blah blah. blah di blah di blah di blah blah blah. blah
    > di blah
    > di blah di blah blah blah. blah di blah di blah di blah blah
    > blah. blah
    > di blah di blah di blah blah blah. blah di blah di blah di blah
    > blah blah.
    > blah di blah di blah di blah blah blah. blah di blah di blah di
    > blah blah
    > blah. blah di blah di blah di blah blah blah. </td>
    > <td width="300" height="50" bgcolor="blue">&nbsp;</td>
    > </tr>
    > <tr>
    > <td bgcolor="red">&nbsp;</td>
    > <td bgcolor="red">&nbsp;</td>
    > </tr>
    > </table>
    >
    > Mozilla 1.5 handles this fine.
    >
    > I've tried assigning the height of the blue cells with CSS, to no
    > effect. Any way to bludgeon IE into obedience? Or do I have to abandon
    > the table and use <div>s?


    My IE obeys my orders ;-)
    I don't use width= and height= in the html though.
    If I want all td's the same height, I use
    td {height:50px;}
    (in the css file, or in a style block)
    If it's one particular row of td's I want a certain height,
    I assign a class to the first td in that row, like this:
    <tr>
    <td class="anyword">bla bla bla</td>
    <td>bla bla again</td>
    </tr>
    and style it in the css file like this:
    td.anyword {height:50px;}

    If this doesn't work for you, you probably made some mistake
    somewhere, in that case, upload the document so people here
    can examine it.
    Maybe it has to do with your rowspans as well, I'm not sure
    of the effect that has.

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Feb 23, 2004
    #2
    1. Advertising

  3. Danny

    Danny Guest

    On Mon, 23 Feb 2004 12:16:32 +0100, Els <>
    wrote:
    >
    >My IE obeys my orders ;-)
    >I don't use width= and height= in the html though.
    >If I want all td's the same height, I use
    >td {height:50px;}
    >(in the css file, or in a style block)
    >If it's one particular row of td's I want a certain height,
    >I assign a class to the first td in that row, like this:
    ><tr>
    > <td class="anyword">bla bla bla</td>
    > <td>bla bla again</td>
    ></tr>
    >and style it in the css file like this:
    >td.anyword {height:50px;}
    >
    >If this doesn't work for you, you probably made some mistake
    >somewhere, in that case, upload the document so people here
    >can examine it.
    >Maybe it has to do with your rowspans as well, I'm not sure
    >of the effect that has.


    I've tried assigning height via CSS, with the same result. It is
    definitely the rowspan=2 on the text cell that is causing the problem
    - although as far as I can see it shouldn't. Unfortunately, I need the
    rowspan to get the effect I am looking for. I'm writing a Dreamweaver
    template, so I don't know in advance what the height of the main text
    cell (and hence the red cells) will be. I do know that I want the blue
    cells to be 50px high - they will actually have a background image
    that ends in solid red at the bottom, thereby merging visually with
    the red cells underneath.

    Here's the complete doc:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <style type="text/css">
    ..h50 {
    height: 50px;
    width: 100px;
    background-color: blue;
    }
    </style>
    </head>

    <body>
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td class="h50">&nbsp;</td>
    <td rowspan="2" width="300">blah di blah di blah di blah blah
    blah. blah di blah di blah
    di blah blah blah. blah di blah di blah di blah blah blah. blah
    di blah
    di blah di blah blah blah. blah di blah di blah di blah blah
    blah. blah
    di blah di blah di blah blah blah. blah di blah di blah di blah
    blah blah.
    blah di blah di blah di blah blah blah. blah di blah di blah di
    blah blah
    blah. blah di blah di blah di blah blah blah. </td>
    <td class="h50">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="red">&nbsp;</td>
    <td bgcolor="red">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>
     
    Danny, Feb 23, 2004
    #3
  4. Danny

    Els Guest

    Danny wrote:

    > On Mon, 23 Feb 2004 12:16:32 +0100, Els <>
    > wrote:
    >
    >>Maybe it has to do with your rowspans as well, I'm not sure
    >>of the effect that has.

    >
    > I've tried assigning height via CSS, with the same result. It is
    > definitely the rowspan=2 on the text cell that is causing the problem
    > - although as far as I can see it shouldn't. Unfortunately, I need the
    > rowspan to get the effect I am looking for. I'm writing a Dreamweaver
    > template, so I don't know in advance what the height of the main text
    > cell (and hence the red cells) will be. I do know that I want the blue
    > cells to be 50px high - they will actually have a background image
    > that ends in solid red at the bottom, thereby merging visually with
    > the red cells underneath.


    [snip code]

    I fiddled around a bit with it, but it just won't obey :-(

    Of course you can have the visual effect using other
    'tricks', like having just 3 cells, the left and right
    having a background-image no-repeat at the top, on a red
    background color, and have the content in those cells start
    at 50px from the top.


    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Feb 23, 2004
    #4
  5. Danny

    Danny Guest

    >I fiddled around a bit with it, but it just won't obey :-(
    >
    >Of course you can have the visual effect using other
    >'tricks', like having just 3 cells, the left and right
    >having a background-image no-repeat at the top, on a red
    >background color, and have the content in those cells start
    >at 50px from the top.


    Thanks for your help.... this had just occurred to me too!

    I now know *why* my example doesn't work as expected. The detail is
    at:
    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwdn/html/ch10_tables.asp
    (section headed Restraining Row Heights, containing Figure 10-13).

    The crucial point is: "the [<td>] height attribute specifies a
    minimum, not a maximum". Makes sense if you think of a cell with
    height=50 but filled with loads of contents - the height will expand
    beyond 50 if necessary to display the contents.

    It's a bit counter-intuitive in my example, because both the blue and
    red cells just contain a space. I guess that IE handles the rowspan=2
    by assigning the height needed from the topmost cell down. And the
    height of the red cell, since I don't specify it, is the minimum
    required to hold a space.
     
    Danny, Feb 23, 2004
    #5
  6. Danny

    Els Guest

    Danny wrote:

    > http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwdn/html/ch10_tables.asp
    > (section headed Restraining Row Heights, containing Figure 10-13).
    >
    > The crucial point is: "the [<td>] height attribute specifies a
    > minimum, not a maximum". Makes sense if you think of a cell with
    > height=50 but filled with loads of contents - the height will expand
    > beyond 50 if necessary to display the contents.
    >
    > It's a bit counter-intuitive in my example, because both the blue and
    > red cells just contain a space. I guess that IE handles the rowspan=2
    > by assigning the height needed from the topmost cell down. And the
    > height of the red cell, since I don't specify it, is the minimum
    > required to hold a space.


    I think that must be the case then.
    Well, at least we have learned something new today :)


    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Feb 23, 2004
    #6
  7. Danny

    DU Guest

    Danny wrote:

    >>I fiddled around a bit with it, but it just won't obey :-(
    >>
    >>Of course you can have the visual effect using other
    >>'tricks', like having just 3 cells, the left and right
    >>having a background-image no-repeat at the top, on a red
    >>background color, and have the content in those cells start
    >>at 50px from the top.

    >
    >
    > Thanks for your help.... this had just occurred to me too!
    >
    > I now know *why* my example doesn't work as expected. The detail is
    > at:
    > http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwdn/html/ch10_tables.asp
    > (section headed Restraining Row Heights, containing Figure 10-13).
    >
    > The crucial point is: "the [<td>] height attribute specifies a
    > minimum, not a maximum". Makes sense if you think of a cell with
    > height=50 but filled with loads of contents - the height will expand
    > beyond 50 if necessary to display the contents.
    >


    MSIE 6 for windows still has a bug on overflow:visible. It will make the
    element's box grow when it should not according to W3C CSS2 Technical
    Recommendation. In case of a <td> or a <tr>, it's different because the
    table is the offsetParent.

    > It's a bit counter-intuitive in my example, because both the blue and
    > red cells just contain a space. I guess that IE handles the rowspan=2
    > by assigning the height needed from the topmost cell down. And the
    > height of the red cell, since I don't specify it, is the minimum
    > required to hold a space.
    >



    No. The height of that cell is entirely dependent on the height needed
    to hold all of the blah blah text. If not defined, height (or width) is
    auto in W3C web standards compliant browsers.

    If the content of that td with rowspan="2" is normal and reasonable -
    that is with tabular data, not just text - then MSIE 6 for windows in
    standards compliant rendering mode renders perfectly 2 table rows of 50
    pixels high and these 5 <td>s. You may need to add the css declaration
    overflow:auto if needed.
    Btw, the width values don't add up: 100 + 300 + 300 > 500

    In any case, it looks to me that you are using a table design to create
    2 columns for navigation (and or menu, links) and 1 central column for
    content... which should not be the purpose nor normal usage for <table>.
    There are many [tutorial] sites explaining, detailing and offering
    alternatives to table design.

    DU
     
    DU, Feb 24, 2004
    #7
  8. Danny

    mensor Guest

    (sorry...I didn't copy all the above text)

    My problem is vey similar:
    (I don't think this will come out right, but you can imagine what I'
    trying to show (2 left cells in 1 column, then matching right colum
    with 1 large cell)
    ******************
    * * *
    * 1 * *
    ******* *
    * * 3 *
    * 2 * *
    * * *
    * * *
    ******************

    IE wouldn't display cell 1 as 200px, no matter what I did (CSS
    height=200, etc), even though the contents of the cell were exactl
    200...the contents of cell 3 seemed to make the difference. When cel
    3 was very large, cell 1 and 2 would be about the same size, but whe
    cell 3 was smaller than the two put together, then cell 1 would act th
    right way.

    Here is how I solved my issue with it...

    I created a function for body (onload) that would find the clien
    height, then subtract my header bar (stuff above the table)...then se
    the cell2.style.height = to that number....I did this only for I
    (if(docuement.all))

    I hope this helps you with your problem!

    Mike
    -
    menso
    -----------------------------------------------------------------------
    Posted via http://www.forum4designers.co
    -----------------------------------------------------------------------
    View this thread: http://www.forum4designers.com/message49434.htm
     
    mensor, Jul 17, 2004
    #8
  9. Danny

    brucie Guest

    brucie, Jul 17, 2004
    #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. Ivor O'Connor
    Replies:
    4
    Views:
    852
    Isofarro
    Nov 25, 2003
  2. Replies:
    0
    Views:
    559
  3. perspolis
    Replies:
    1
    Views:
    2,576
    Mark Rae
    Jan 23, 2007
  4. Oliver Wong

    IE6 ignoring "height" CSS attribute?

    Oliver Wong, Jun 4, 2007, in forum: HTML
    Replies:
    3
    Views:
    1,050
    Oliver Wong
    Jun 5, 2007
  5. Replies:
    1
    Views:
    2,725
    Adrienne Boswell
    Sep 24, 2008
Loading...

Share This Page