SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    100% height table in IE in standards mode

    Can you make it work or is it only in quirks mode?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    html, body {
      height: 100%;
      margin: 0;
      padding: 0
    }
    table, #content {
      height: 100%;
      vertical-align: top
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
      <td>Header</td>
    </tr>
    <tr>
      <td id="content">Content</td>
    </tr>
    <tr>
      <td>Footer</td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I just ran that code (in standards mode and in quirks) through IE6/7/Opera and all were similar in results?
    By results, I mean a 100&#37; high content and the footer at the bottom of the page
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Really? IE7 and IE8 were showing the middle cell at the full 100&#37; of the page.
    Didn't test in ie6.

    So the table is bigger than 100%.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I got no scrollbars (the footer sat nicely at the bottom of the page)

    Could you produce a screenshot? What simulator do you use to test IE6/7/8
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Mark,
    I got the same results you did. However, If I remove the 100&#37; height from the #content then IE8 will render the same as FF3.

    We may be standing on shaky ground here though. It is quite obvious where you are going with this.

    For the sake of testing , this works in IE8 and FF3 but not IE6/7. I set some heights on the header/footer though.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Table Test</title>
    <style type="text/css">
    html, body {
        height:100%;
        margin:0;
        padding:0;
    }
    table {
        height:100%;
        width:80%;
        margin:0 auto;
        border-collapse:collapse;
    }
    table td{
        vertical-align:top;
    }
    #header {
        height:80px;
        background:red;
    }
    #content {
        /*height:100%; gives scrollbar in IE8*/
        background:#CDF;
    }
    #footer {
        height:50px;
        background:lime;
    }
    </style>
    </head>
    <body>
    <table>
        <tr>
          <td id="header">Header</td>
        </tr>
        <tr>
          <td id="content">Content</td>
        </tr>
        <tr>
          <td id="footer">Footer</td>
        </tr>
    </table>
    </body>
    </html>

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Thanks Ray,

    I did try making the header and footer cells have height: 0; and the middle cell have height: auto; but it didn't like that much.
    I tried quite a few different combinations and just couldn't get it to look right in standards mode.

    problem solved.


Bookmarks

Posting Permissions

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