IE ignores table cell height propery - why?

Discussion in 'HTML' started by Andrey Tarasevich, Aug 8, 2005.

  1. Hello

    This is probably something simple, but I can't seem to find an answer. Consider
    the following code

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html style="width: 100%; height: 100%">
    <body style="width: 100%; height: 100%">
    <table style="width: 100%; height: 100%">
    <tr><td style="height: 20px; border: 1px solid black"><p>1</p></td></tr>
    <tr><td><p>2</p></td></tr>
    <tr><td style="height: 20px; border: 1px solid black"><p>3</p></td></tr>
    </table>
    </body>
    </html>

    I want the first and the last row to have explicitly specified height and the
    middle row to occupy the rest of the entire table height. The problem is that IE
    6 is ignoring the 'height' specification for the first and the last rows' cells.
    Every row in IE appears take exactly 1/3 of the table's height.

    MS FrontPage's user interface ('Style' dialog) seems to suggest that in order to
    use 'height' property I also have to specify a 'position' property (is this the
    case?). Anyway, adding, say, 'position: relative' to the above 'td' styles
    doesn't change anything.

    Mozilla, on the other hand, seems to do what I expect it to do.

    Am I doing something wrong? If that's the case, what's the right way to achieve
    the required distribution of row heights?

    --
    Best regards,
    Andrey Tarasevich
     
    Andrey Tarasevich, Aug 8, 2005
    #1
    1. Advertising

  2. Andrey Tarasevich

    Neredbojias Guest

    With neither quill nor qualm, Andrey Tarasevich quothed:

    > I want the first and the last row to have explicitly specified height and the
    > middle row to occupy the rest of the entire table height. The problem is that IE
    > 6 is ignoring the 'height' specification for the first and the last rows' cells.
    > Every row in IE appears take exactly 1/3 of the table's height.


    Yes, I had virtually the same problem. Thereupon, I made a careful read
    of the w3c spec regarding tables, specifically heights, and came to the
    conclusion they didn't know how to do it, either.

    You could try setting 1st & last rows to 1%, middle row to 98%, and
    using a 1st/last div of height 20px but no guarantees. I honestly can't
    remember what I did to resolve my own issue (had a few beers since then)
    though probably it was to give up on the table altogether.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Aug 9, 2005
    #2
    1. Advertising

  3. Andrey Tarasevich

    mbstevens Guest

    Andrey Tarasevich wrote:
    > Hello
    >
    > This is probably something simple, but I can't seem to find an answer. Consider
    > the following code
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > <html style="width: 100%; height: 100%">
    > <body style="width: 100%; height: 100%">
    > <table style="width: 100%; height: 100%">
    > <tr><td style="height: 20px; border: 1px solid black"><p>1</p></td></tr>
    > <tr><td><p>2</p></td></tr>
    > <tr><td style="height: 20px; border: 1px solid black"><p>3</p></td></tr>
    > </table>
    > </body>
    > </html>


    Your page uses deprecated markup. Try changing to more modern markup.
    The most common sympton of deprecated markup is
    placing instructions about where or how a thing is displayed in
    the (X)HTML markup instead of CSS.

    >
    > I want the first and the last row to have explicitly specified height and the
    > middle row to occupy the rest of the entire table height. The problem is that IE
    > 6 is ignoring the 'height' specification for the first and the last rows' cells.
    > Every row in IE appears take exactly 1/3 of the table's height.
    >
    > MS FrontPage's user interface ('Style' dialog) seems to suggest


    The Frontpage website tool has a bad reputation for
    writing IE specific code that does not work well with other
    browsers. Consider actually learning web standars
    (X)HTML/CSS, and then use a text editor with highlighting
    as the tool to write with. Use an FTP client as a tool
    to upload with instead of depending on Frontpage's FTP
    tools, too.

    > that in order to
    > use 'height' property I also have to specify a 'position' property (is this the
    > case?).


    In this case it's probably some Frontpage quirk.
    --
    mbstevens
    http://www.mbstevens.com/cgi/mkatt.pl?name=python/Critique_Generator
    (new, version 1.1)
     
    mbstevens, Aug 9, 2005
    #3
  4. mbstevens wrote:
    >>
    >> This is probably something simple, but I can't seem to find an answer. Consider
    >> the following code
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >>
    >> <html style="width: 100%; height: 100%">
    >> <body style="width: 100%; height: 100%">
    >> <table style="width: 100%; height: 100%">
    >> <tr><td style="height: 20px; border: 1px solid black"><p>1</p></td></tr>
    >> <tr><td><p>2</p></td></tr>
    >> <tr><td style="height: 20px; border: 1px solid black"><p>3</p></td></tr>
    >> </table>
    >> </body>
    >> </html>

    >
    > Your page uses deprecated markup. Try changing to more modern markup.
    > The most common sympton of deprecated markup is
    > placing instructions about where or how a thing is displayed in
    > the (X)HTML markup instead of CSS.
    > ...


    Yes, but that's beside the point. I do use CSS. The above code was created for
    the sole purpose of serving as an artificial example in my post. Placing the
    properties into CSS makes no difference.

    >
    > The Frontpage website tool has a bad reputation for
    > writing IE specific code that does not work well with other
    > browsers. Consider actually learning web standars
    > (X)HTML/CSS, and then use a text editor with highlighting
    > as the tool to write with.


    My current knowledge of the above standards is more than sufficient for my
    purposes, except for the issue in question.

    FrontPage can be used as text editor with HTML highlighting, which is pretty
    much how I use it now. There's no need to switch to any other editor.

    > Use an FTP client as a tool
    > to upload with instead of depending on Frontpage's FTP
    > tools, too.


    I'm perfectly happy with FrontPage's upload functionality, although I currently
    use its HTTP upload, not FTP. It works perfectly fine, meaning the there's no
    need to switch.

    --
    Best regards,
    Andrey Tarasevich
     
    Andrey Tarasevich, Aug 9, 2005
    #4
  5. Andrey Tarasevich

    mbstevens Guest

    The problem is that IE
    > 6 is ignoring the 'height' specification for the first and the last rows' cells.
    > Every row in IE appears take exactly 1/3 of the table's height.


    <html style="width: 100%; height: 100%">
    <body style="width: 98%; height: 98%">
    <table style="width: 100%; height: 100%">
    <tr><td style="height: 20px; border: 1px solid
    black"><p>1</p></td></tr>
    <tr><td><p>2</p></td></tr>
    <tr><td style="height: 20px; border: 1px solid
    black"><p>3</p></td></tr>
    </table>
    </body>
    </html>

    ....seems to work fine on ie6 for me. Of course, you get left with a
    border of a few pixels.
     
    mbstevens, Aug 9, 2005
    #5
  6. mbstevens wrote:
    > The problem is that IE
    >> 6 is ignoring the 'height' specification for the first and the last rows' cells.
    >> Every row in IE appears take exactly 1/3 of the table's height.

    >
    > <html style="width: 100%; height: 100%">
    > <body style="width: 98%; height: 98%">
    > <table style="width: 100%; height: 100%">
    > <tr><td style="height: 20px; border: 1px solid
    > black"><p>1</p></td></tr>
    > <tr><td><p>2</p></td></tr>
    > <tr><td style="height: 20px; border: 1px solid
    > black"><p>3</p></td></tr>
    > </table>
    > </body>
    > </html>
    >
    > ...seems to work fine on ie6 for me. Of course, you get left with a
    > border of a few pixels.


    Yes, but unfortunately it stops working once you switch IE6 to "standard" mode
    by adding that '!DOCTYPE' line from my original example. I would drop that line
    without any doubt, but then IE6 will start acting weirdly with respect to
    element widths...

    --
    Best regards,
    Andrey Tarasevich
     
    Andrey Tarasevich, Aug 9, 2005
    #6
  7. Andrey Tarasevich

    mbstevens Guest

    Andrey Tarasevich wrote:
    > mbstevens wrote:
    >
    >> The problem is that IE
    >>
    >>>6 is ignoring the 'height' specification for the first and the last rows' cells.
    >>>Every row in IE appears take exactly 1/3 of the table's height.

    >>
    >><html style="width: 100%; height: 100%">
    >> <body style="width: 98%; height: 98%">
    >> <table style="width: 100%; height: 100%">
    >> <tr><td style="height: 20px; border: 1px solid
    >>black"><p>1</p></td></tr>
    >> <tr><td><p>2</p></td></tr>
    >> <tr><td style="height: 20px; border: 1px solid
    >>black"><p>3</p></td></tr>
    >> </table>
    >> </body>
    >></html>
    >>
    >>...seems to work fine on ie6 for me. Of course, you get left with a
    >>border of a few pixels.

    >
    >
    > Yes, but unfortunately it stops working once you switch IE6 to "standard" mode
    > by adding that '!DOCTYPE' line from my original example. I would drop that line
    > without any doubt, but then IE6 will start acting weirdly with respect to
    > element widths...


    And, you really should have that doctype. So the solution that appears
    to me is to not try to do the thing with a three cell table. There are
    any number of good templates on the net that have a header and footer
    with resizable stuff in the middle. I can point you to some if you're
    interested.
     
    mbstevens, Aug 9, 2005
    #7
    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. Replies:
    0
    Views:
    562
  2. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,033
    Smokey Grindel
    Dec 2, 2006
  3. Tomasz Chmielewski

    Firefox ignores img height / width?

    Tomasz Chmielewski, Nov 2, 2007, in forum: HTML
    Replies:
    11
    Views:
    3,921
    Tomasz Chmielewski
    Nov 3, 2007
  4. JC

    textbox height = containing cell height - x

    JC, Jul 29, 2004, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    190
    DujHoD
    Aug 2, 2004
  5. Replies:
    2
    Views:
    246
    Thomas 'PointedEars' Lahn
    Aug 5, 2008
Loading...

Share This Page