Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100%-height tables in Firefox standards-compliance mode

    Dear All,

    I'm trying to create a page containing a table that fills the entire visible area of the current window. This is what I have so far:

    Code:
    <?xml version="1.0" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>100% height</title>
    </head>
    <body>
        <table style="width: 100%; height: 100%; background-color: #FF0000;">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    </body>
    </html>
    Clearly the table is happening stretching to 100% width, but the height isn't affected. What am I doing wrong here? Note, that it is very important that this page validates as XHTML and runs in Firefox's standards-compliance mode, so I cannot remove the XML and !DOCTYPE declarations.

    Thanks, Richard.

  • #2
    Regular Coder
    Join Date
    May 2005
    Location
    lincolnshire
    Posts
    155
    Thanks
    0
    Thanked 0 Times in 0 Posts

    could you not use CSS

    Could you not use CSS, It is a much more approved method
    of laying out pages, diminishes the glitches of tables for layout!

    There was never meant to be a height attribute for <table>, but thats not the real reason for the indifference; there is a difference between the browsers viewpoint height, and the block tags <table> and <html>'s 100% attribute height; Using the table method you get 100% of the block tags!, not the page!

    I would push you towards a CSS layout;
    <style>
    html,body{
    margin:0;
    padding:0;
    height:100%;
    border:none
    }
    </style>
    littletoaster - web design dwsystems -pc repair

    "If the diver thought of the shark, he would never lay hands on the pearl"

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by RichardCook
    Code:
    <?xml version="1.0" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    …

    Note, that it is very important that this page validates as XHTML and runs in Firefox's standards-compliance mode, so I cannot remove the XML and !DOCTYPE declarations.

    Thanks, Richard.
    Fwiw, (afaik) unless you're actually serving your xhtml markup as xml (i.e. using the application/xhtml+xml mime-type), the xml prologue is completely redundant (serving only to do damage in MSIE6).
    The markup will still validate as XHTML 1.0 Transitional without the xml prologue.

    Additionally, are you passing any character encoding in the headers? There appears to be no mention of character encoding in either meta tag or xml prologue format.
    As is, unless you're passing character encoding through the served headers, then the code you present there won't validate. I'm not sure how character encoding passed only via the server is dealt with regarding validity and validators.

    Code:
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    …fwiw.

  • #4
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by little_toaster
    Could you not use CSS, It is a much more approved method
    of laying out pages, diminishes the glitches of tables for layout!

    There was never meant to be a height attribute for <table>, but thats not the real reason for the indifference; there is a difference between the browsers viewpoint height, and the block tags <table> and <html>'s 100% attribute height; Using the table method you get 100% of the block tags!, not the page!

    I would push you towards a CSS layout;
    <style>
    html,body{
    margin:0;
    padding:0;
    height:100%;
    border:none
    }
    </style>
    Thanks very much! That's perfect.

    I am actively pushing my site's design towards CSS layout as much as is possible.

    Best regards, Richard.

  • #5
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bill Posters
    Fwiw, (afaik) unless you're actually serving your xhtml markup as xml (i.e. using the application/xhtml+xml mime-type), the xml prologue is completely redundant (serving only to do damage in MSIE6).
    The markup will still validate as XHTML 1.0 Transitional without the xml prologue.
    From my experience, the XML and !DOCTYPE declarations are required to force Firefox into full standards-compliance mode instead of quirks mode.

    Quote Originally Posted by Bill Posters
    Additionally, are you passing any character encoding in the headers? There appears to be no mention of character encoding in either meta tag or xml prologue format.
    My server is passing a "Content-Type" header with content "text/html; charset=iso-8859-1". I will in future be inserting the <meta /> elements as you suggest, however.

    Thanks for the tips!

    Richard.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by RichardCook
    From my experience, the XML and !DOCTYPE declarations are required to force Firefox into full standards-compliance mode instead of quirks mode.
    The presence of the DTD is, of course, absolutely necessary for any browser to be put into compliant mode* (and for the markup to be valid), but as for the necessary presence of the xml prologue - I'm certain that can't be correct.
    (* or as close as it can get, in some cases)

    I've produced a number of sites using valid XHTML 1.0 Strict DTDs and I've not used the xml prologue in any of those which are served as text/html.
    The Firefox Web Developer toolbar (a life/time-saver and an absolute must-have for any developer using FF) has a icon on the r/h/s that notifies users when a site/page has placed FF into standards-compliant mode or not. Every site I produce places FF into standards-compliant mode.

    I can't say beyond that, but I've certainly never had any issues developing/testing within Firefox that could be put down to Firefox not really being in standards-compliant mode.

    My server is passing a "Content-Type" header with content "text/html; charset=iso-8859-1". I will in future be inserting the <meta /> elements as you suggest, however.

    Thanks for the tips!

    Richard.
    In that case, the xml prologue really is redundant.
    Lose it.


    Btw, is this for a closed network or intranet where all users will be using FF?
    Last edited by Bill Posters; 06-02-2005 at 09:49 PM.

  • #7
    Regular Coder
    Join Date
    May 2005
    Location
    lincolnshire
    Posts
    155
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Glad to help!

    littletoaster - web design dwsystems -pc repair

    "If the diver thought of the shark, he would never lay hands on the pearl"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •