IE7: First row height attribute ignored when table height is 100%

Discussion in 'Internet Explorer' started by kalahari_kudu, Nov 7, 2006.

  1. Hi

    I have found some behaviour in IE7 that is inconsistent with IE6 and even
    Firefox. I am struggling to find a way to set the height of the first ROW of
    a table with a height of 100%. Here is a simple code snippet used to

    <body style="height:100%; padding: 0px; margin: 0px">
    <table cellpadding="0" cellspacing="0" style="height:100%; width:100%">
    <td style="border: 3px solid red; height: 25px">
    <table><tr><td>This is the top row</td></tr></table>
    <td style="border: 3px solid blue;">This is the bottom row</td>

    First of all, remember to add style="height:100%" the html and body tag
    otherwise it will not work in IE7, this is new and similar to Firefox, so I
    guess it is an standards issue...

    Now back to my problem:
    As you can see, I have specified the height for the first row in the TD tag.
    This code works perfectly in IE6 and Firefox (top row is of 25px height),
    but IE7 simply decides for itself what the height should be. In other words,
    IE7 simply makes two equal size rows.

    I tried the following with no success:

    add a height style attribute to the TR tag of the first row
    used percentages instead of pixels for the height of the first row
    added a "height: auto" style attribute to the TD and TR tags of the second
    added a "max-height" attribute to the TR and TD tag of the first row
    The only way I could change the height of the two rows was to specify the
    height of the BOTTOM ROW (either in pixels or percentage). This caused IE7
    to behave like IE6 and Firefox. This is unsatisfactory, as sometimes I only
    now the top row's height and the bottom row should fill the rest of the page.

    Does anyone have any ideas? Maybe a style element I am leaving out?

    kalahari_kudu, Nov 7, 2006
    1. Advertisements

  2. kalahari_kudu

    simeon Guest

    I had the same problem and submitted a bug report to microsoft, but in their
    ie7 chat session they told me tough luck. They may fix it in another release
    but not the ie 7 release.

    So you are SOL. I have tried everything to work around it but no luck.

    In the transitional and strict doctypes you can't get control of the table
    height AND the row/cell heights. Its one or the other.

    In quirks mode you can get control of table row/cell heights as expected.
    So, if you can use quirks you should be able to get it working.

    A pretty crappy bug to slip into the ie7 main release considering how common
    tables are for laying out liquid UI's.

    simeon, Nov 16, 2006
    1. Advertisements

  3. Hi Simeon

    Thank you for the reply! Luckily (or maybe shockingly), I do not have to
    worry about whether the page is in strict/transitional mode.

    If I understand you correctly: If I use quirks mode, I can get it working.

    Do I simply continue to specify the css height attribute or do I have to use
    Javascript? I am not familiar with quirks mode, do you set it the same way

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    I agree, it is rather shocking that such a simple principle works in IE6
    (incl Firefox), but it slipped in with IE7... Thanks again for your reply!


    Marc (aka kalahari_kudu)
    PS: You do not by any chance have a link to where you logged the bug? That
    is of course if Microsoft makes such information available publicly. Then at
    least I can tell my superiors why the web application is buggy in IE7 and
    point them to a site...
    kalahari_kudu, Nov 16, 2006
  4. kalahari_kudu

    simeon Guest

    If you leave the doctype declaration off of the page then it will trigger the
    browsers to use "Quirks mode" which basically makes them more backwards
    compatible. Unfortunately, this also means you get none of the new
    functionality in IE7.

    If you want to make sure your table respects the specified heights and
    widths, then you will want the have "table-layout:fixed" in the table tag as


    <table width="100%" cellpadding="0" cellspacing="0" border="0" height="100%"
    <tr height="100">
    <td style="background-color:red;">first row</td>
    <td style="background-color:blue;">Second row gets the rest</td>

    you can control the row height with css or as an attribute of the element.
    No need to use javascript.

    simeon, Nov 16, 2006
  5. kalahari_kudu

    camaron Guest

    camaron, May 22, 2008
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.