<table> doesnt have a height attribute but still works?

Discussion in 'HTML' started by Tim Warnock, Aug 31, 2003.

  1. Tim Warnock

    Tim Warnock Guest

    according to html 4.01 it doesnt have a property: yet it works in
    ie/mozilla?

    what are we supposed to do to make a table using a height percentage?

    ie:

    +----------------------------+
    | |
    | |
    | 100% x 60% |
    | |
    | |
    | |
    +----------------------------+
    | 100% x 40% |
    | |
    +----------------------------+

    --
    Thanks
    Tim Warnock
    Tim Warnock, Aug 31, 2003
    #1
    1. Advertising

  2. "Tim Warnock" <> wrote in message
    news:birhpb$hi3$...
    > according to html 4.01 it doesnt have a property: yet it works in
    > ie/mozilla?
    >


    No it doesn't
    <repost>
    Here we see a 100 pct (height and width) table -
    http://karlcore.com/100pcttable/100pctnodtd.php
    Notice how this "works". Unfortunately, it only works because there is no
    DTD. As such, it throws the browser into "Quirks mode".
    Last I checked, it worked in all browsers.

    This may be a suitable "workaround" for some people, but it is not for me. I
    care about the quality of my work and I will not walk around topless with no
    DTD.
    This is the same exact page with an HTML 4.01 Strict DTD -
    http://karlcore.com/100pcttable/100pctwithdtd.php
    Notice that despite the fact that the "height" attribute remains on the
    table element, it does not show up? This is because the browser is no
    longer in "Quirks mode" but is rather following the DTD we have given to it.
    (It is also still not valid markup because of the height attribute)

    Now, there may be a solution to this issue, borrowed from our pal, Brucie
    and a post he made to CIWAH -
    http://karlcore.com/100pcttable/100pctcsswithdtd.php
    This is 100% valid HTML 4.01 Strict and does what is intended.


    Simply put - if you have to find a way to make something work - fix the
    design.


    --
    Karl Core

    Charles Sweeney says my sig is fine as it is.
    EightNineThree, Aug 31, 2003
    #2
    1. Advertising

  3. Tim Warnock

    Tim Warnock Guest

    is this a valid use then?

    <table width="100%" border="1" cellpadding="3" style="height: 67%;">

    it validates for 4.01 traditional and appears to work

    --
    Thanks
    Tim Warnock

    ISP Technical Manager
    GetOnIt! Nationwide Internet.
    1300 88 00 97
    timoid (at) getonit.net.au
    "EightNineThree" <> wrote in
    message news:biri4o$jkh$...
    >
    > "Tim Warnock" <> wrote in message
    > news:birhpb$hi3$...
    > > according to html 4.01 it doesnt have a property: yet it works in
    > > ie/mozilla?
    > >

    >
    > No it doesn't
    > <repost>
    > Here we see a 100 pct (height and width) table -
    > http://karlcore.com/100pcttable/100pctnodtd.php
    > Notice how this "works". Unfortunately, it only works because there

    is no
    > DTD. As such, it throws the browser into "Quirks mode".
    > Last I checked, it worked in all browsers.
    >
    > This may be a suitable "workaround" for some people, but it is not

    for me. I
    > care about the quality of my work and I will not walk around topless

    with no
    > DTD.
    > This is the same exact page with an HTML 4.01 Strict DTD -
    > http://karlcore.com/100pcttable/100pctwithdtd.php
    > Notice that despite the fact that the "height" attribute remains on

    the
    > table element, it does not show up? This is because the browser is

    no
    > longer in "Quirks mode" but is rather following the DTD we have

    given to it.
    > (It is also still not valid markup because of the height attribute)
    >
    > Now, there may be a solution to this issue, borrowed from our pal,

    Brucie
    > and a post he made to CIWAH -
    > http://karlcore.com/100pcttable/100pctcsswithdtd.php
    > This is 100% valid HTML 4.01 Strict and does what is intended.
    >
    >
    > Simply put - if you have to find a way to make something work - fix

    the
    > design.
    >
    >
    > --
    > Karl Core
    >
    > Charles Sweeney says my sig is fine as it is.
    >
    >
    Tim Warnock, Aug 31, 2003
    #3
  4. Tim Warnock

    Richard Guest

    Tim Warnock wrote:>>

    > is this a valid use then?


    > <table width="100%" border="1" cellpadding="3" style="height: 67%;">


    > it validates for 4.01 traditional and appears to work


    Height and width are "floating" variables. If you specify neither, both will
    vary in accordance with content.
    IMHO, height should never be a %. unless it's a nested table.
    Unless you define the page size, how does height know what to use as 100%?



    > --
    > Thanks
    > Tim Warnock


    > ISP Technical Manager
    > GetOnIt! Nationwide Internet.
    > 1300 88 00 97
    > timoid (at) getonit.net.au
    > "EightNineThree" <> wrote in
    > message news:biri4o$jkh$...
    >>
    >> "Tim Warnock" <> wrote in message
    >> news:birhpb$hi3$...
    > >> according to html 4.01 it doesnt have a property: yet it works in
    > >> ie/mozilla?
    > >>

    >>
    >> No it doesn't
    >> <repost>
    >> Here we see a 100 pct (height and width) table -
    >> http://karlcore.com/100pcttable/100pctnodtd.php
    >> Notice how this "works". Unfortunately, it only works because there

    > is no
    >> DTD. As such, it throws the browser into "Quirks mode".
    >> Last I checked, it worked in all browsers.
    >>
    >> This may be a suitable "workaround" for some people, but it is not

    > for me. I
    >> care about the quality of my work and I will not walk around topless

    > with no
    >> DTD.
    >> This is the same exact page with an HTML 4.01 Strict DTD -
    >> http://karlcore.com/100pcttable/100pctwithdtd.php
    >> Notice that despite the fact that the "height" attribute remains on

    > the
    >> table element, it does not show up? This is because the browser is

    > no
    >> longer in "Quirks mode" but is rather following the DTD we have

    > given to it.
    >> (It is also still not valid markup because of the height attribute)
    >>
    >> Now, there may be a solution to this issue, borrowed from our pal,

    > Brucie
    >> and a post he made to CIWAH -
    >> http://karlcore.com/100pcttable/100pctcsswithdtd.php
    >> This is 100% valid HTML 4.01 Strict and does what is intended.
    >>
    >>
    >> Simply put - if you have to find a way to make something work - fix

    > the
    >> design.
    >>
    >>
    >> --
    >> Karl Core
    >>
    >> Charles Sweeney says my sig is fine as it is.
    >>
    >>
    Richard, Aug 31, 2003
    #4
  5. Tim Warnock wrote:

    > <table width="100%" border="1" cellpadding="3" style="height: 67%;">


    67% of what? This certainly doesn't mean 67% of the screen height -- it
    means 67% of the body height. But how tall is the body? The body is only
    as big as the elements that it contains -- possibly just this table. So
    the body is the same height as the table. But then the table has to be 67%
    of the height of the body, etc -- the height of each is defined in terms
    of the other. Not a good situation to find yourself in.

    --
    Toby A Inkster BSc (Hons) ARCS | mailto: | pgp:0x6A2A7D39
    aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
    http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
    playing://(nothing)
    Toby A Inkster, Aug 31, 2003
    #5
  6. Tim Warnock

    Nico Schuyt Guest

    Tim Warnock wrote:
    > what are we supposed to do to make a table using a height percentage?


    With CSS? See code below
    (Tested in IE5.5 and Mozilla1. In fact in surprises me. Thought it was not
    possible)
    Regards, Nico

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    <title>Test</title>
    <style type="text/css">
    body {
    text-align: center;
    font-family: sans-serif;
    margin: 10px;}
    table {margin-left:auto; margin-right: auto; width: 100%; height: 100%}
    ..w30 {width: 30%;}
    ..w70 {width: 70%}
    ..h40 {height: 40%}
    ..h60 {height: 60%}
    td, th {border: 1px solid black; color: black; background: blue}
    </style>
    </head>
    <body>
    <table>
    <tr class="h60">
    <th class="w30">&nbsp;</th>
    <th class="w70">&nbsp;</th>
    </tr>
    <tr class="h40">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body
    </html>
    Nico Schuyt, Aug 31, 2003
    #6
  7. Tim Warnock

    Nico Schuyt Guest

    Richard wrote:
    > IMHO, height should never be a %. unless it's a nested table.
    > Unless you define the page size, how does height know what to use as
    > 100%?


    Ehhh, is % of window size not logical?
    Nico
    Nico Schuyt, Aug 31, 2003
    #7
  8. Nico Schuyt wrote:
    > Richard wrote:
    >> IMHO, height should never be a %. unless it's a nested table.
    >> Unless you define the page size, how does height know what to use as
    >> 100%?


    > Ehhh, is % of window size not logical?


    It might be logical, but CSS doesn't have a special case for elements which
    are children of the body.

    The short version is: "If an element has height: 100% and its parent element
    has height: auto then the element with height: 100% changes to height:
    auto".

    --
    David Dorward http://dorward.me.uk/
    David Dorward, Aug 31, 2003
    #8
  9. Tim Warnock

    Nico Schuyt Guest

    David Dorward wrote:
    > Nico Schuyt wrote:


    >> Ehhh, is % of window size not logical?


    > It might be logical, but CSS doesn't have a special case for elements
    > which are children of the body.
    > The short version is: "If an element has height: 100% and its parent
    > element has height: auto then the element with height: 100% changes
    > to height: auto".


    Not sure I understand it correctly so forgive my stupid remarks :):
    - 'height: auto' means that "the browser calculates the actual height" isn't
    it?
    I can't find the basis/formula of that calculation. Doesn't that makes the
    result unpredictable?
    - If no height of the parent (like 'body') is defined, and the child has
    height: 100%, isn't that 100% of window size?
    Regards, Nico
    Nico Schuyt, Aug 31, 2003
    #9
  10. Nico Schuyt wrote:

    >> The short version is: "If an element has height: 100% and its parent
    >> element has height: auto then the element with height: 100% changes
    >> to height: auto".

    >
    > - 'height: auto' means that "the browser calculates the actual height"
    > isn't it?


    The height of the element is dependent on its content.

    > I can't find the basis/formula of that calculation. Doesn't that makes the
    > result unpredictable?


    Its as big as it needs to be

    > - If no height of the parent (like 'body') is defined, and the child has
    > height: 100%, isn't that 100% of window size?


    No. The height of the parent (in this case "body") is defined - its the
    default: auto. So the body is as big as it needs to be. When a height is
    specified in percentages and the parent element has height: auto, then the
    height: x% becomes height: auto.

    The result is that the table gains height: auto, so the table is as tall as
    it needs to be and no taller - which is the default anyway.

    --
    David Dorward http://dorward.me.uk/
    David Dorward, Aug 31, 2003
    #10
  11. Tim Warnock

    Nico Schuyt Guest

    David Dorward wrote:
    > Nico Schuyt wrote:


    >> - 'height: auto' means that "the browser calculates the actual
    >> height" isn't it?


    > The height of the element is dependent on its content.


    So, an empty body element has a height of zero?

    >> I can't find the basis/formula of that calculation. Doesn't that
    >> makes the result unpredictable?


    > Its as big as it needs to be


    Confusing. What *is* needed? There must be a list of rules for that.
    And isn't that browser dependant?

    >> - If no height of the parent (like 'body') is defined, and the child
    >> has height: 100%, isn't that 100% of window size?


    > No. The height of the parent (in this case "body") is defined - its
    > the default: auto. So the body is as big as it needs to be. When a
    > height is specified in percentages and the parent element has height:
    > auto, then the height: x% becomes height: auto.


    > The result is that the table gains height: auto, so the table is as
    > tall as it needs to be and no taller - which is the default anyway.


    In my code snippet I set the height property of the table to 100%. The
    height of the body is not specified so that is the default 'auto'. So the
    table ends up in 'auto' in this case, which seems to be window size. Is that
    'what is needed'? And it is certainly not the default.
    Nico
    Nico Schuyt, Aug 31, 2003
    #11
  12. Tim Warnock

    Nico Schuyt Guest

    David Dorward wrote:
    > Nico Schuyt wrote:


    >> In my code snippet I set the height property of the table to 100%.
    >> The height of the body is not specified so that is the default
    >> 'auto'. So the table ends up in 'auto' in this case, which seems to
    >> be window size.


    > Sounds like a browser bug. The table should end up as tall as is
    > needed to hold the content inside and no more. Perhaps your browser
    > is running in Quirks (bug emulation) mode, check the DOCTYPE.


    OK, OK it's the quirks mode (incomplete doctype 4.01 transitional) :)
    Still not sure if I should be concerned about it:
    About everyone sees what I want them to see
    The doctype allows me to validate pages in W3C
    Regards, Nico
    Nico Schuyt, Aug 31, 2003
    #12
  13. Tim Warnock

    Olrik Larsen Guest

    Hi EightNineThree and others !

    I just followed your links regarding the height and percentage !

    Try and look at the source below, you will probably notice that
    the IFRAME is bigger than expected !

    I know I should try to render the surrounding cells but, and
    this is a big but, how can I do that, if I do not know the size
    then how can I predict the size.

    I use this very technique on the following site :
    http://www.tra-tanr.dk/sumped
    (It's on purpose that there are no DTD !)

    As you can see from that site, the only firm size is the two
    cells in the top of the table !
    The other surrounding cells have text, and depending on user
    settings on client and css settings, the size of the text might
    vary a lot.

    How does one actually acomplish to manage this with css ?

    It would be great if the upcoming HTML and/or CSS languages
    had something like align='client' (use entire client area) ;-)

    BTW! What is the actual effect of setting html to the same as
    body in your css ?

    Thanks
    Olrik Larsen
    private: mailto:
    work: mailto:
    ---------------------------------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>100% Table With CSS, Valid HTML Strict</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <style type="text/css">
    html,body{margin:0;padding:0;width:100%;height:100%;}
    table{width:100%;height:100%;border:3px solid red;}
    iframe{width:100%;height:100%;}
    </style>
    </head>
    <body>
    <table>
    <tr valign='top'><td>blah</td><td align='right'>blah</td></tr>
    <tr height='100%' valign='top'><td>blah</td><td width='100%'
    ><iframe src='percentheightpg2.html'

    name='bigframe'></iframe></td></tr>
    <tr valign='bottom'><td>blah</td><td align='right'>blah</td></tr>
    </table>
    </body>
    </html>

    ---------------------------------------------------------------

    On Sat, 30 Aug 2003 21:08:32 -0400, "EightNineThree"
    <> wrote:

    >
    >"Tim Warnock" <> wrote in message
    >news:birhpb$hi3$...
    >> according to html 4.01 it doesnt have a property: yet it works in
    >> ie/mozilla?
    >>

    >
    >No it doesn't
    ><repost>
    >Here we see a 100 pct (height and width) table -
    >http://karlcore.com/100pcttable/100pctnodtd.php
    >Notice how this "works". Unfortunately, it only works because there is no
    >DTD. As such, it throws the browser into "Quirks mode".
    >Last I checked, it worked in all browsers.
    >
    >This may be a suitable "workaround" for some people, but it is not for me. I
    >care about the quality of my work and I will not walk around topless with no
    >DTD.
    >This is the same exact page with an HTML 4.01 Strict DTD -
    >http://karlcore.com/100pcttable/100pctwithdtd.php
    >Notice that despite the fact that the "height" attribute remains on the
    >table element, it does not show up? This is because the browser is no
    >longer in "Quirks mode" but is rather following the DTD we have given to it.
    >(It is also still not valid markup because of the height attribute)
    >
    >Now, there may be a solution to this issue, borrowed from our pal, Brucie
    >and a post he made to CIWAH -
    >http://karlcore.com/100pcttable/100pctcsswithdtd.php
    >This is 100% valid HTML 4.01 Strict and does what is intended.
    >
    >
    >Simply put - if you have to find a way to make something work - fix the
    >design.
    Olrik Larsen, Sep 10, 2003
    #13
    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. jack
    Replies:
    1
    Views:
    2,645
  2. perspolis
    Replies:
    1
    Views:
    2,532
    Mark Rae
    Jan 23, 2007
  3. CRON
    Replies:
    10
    Views:
    554
    Jonathan N. Little
    Oct 20, 2006
  4. Replies:
    3
    Views:
    420
    alex23
    May 27, 2008
  5. john T
    Replies:
    7
    Views:
    211
    Richard Formby
    Feb 19, 2004
Loading...

Share This Page