Grow your CSS skills. Land your dream job.

A CSS challenge!

  • # October 28, 2008 at 12:18 pm

    I’m stumped on this one. I have a series of (very) old sites written in HTML3 and designed with a table layout. The layout consists of three rows – a header, content area, and footer. It’s set up like this:

    Code:

    Logo Site Title
    Sidebar Content
    Footer


    The table has a height of 100%, as do the two cells in the middle row (where the page content is). If the content is taller than the window, it naturally pushes down the footer. But if the content is shorter than the browser window, the middle row expands to fill the remaining space, keeping the footer glued to the bottom of the window.

    Here’s the problem. We’re trying to transition the sites to HTML4, but table height is deprecated. Thus, with the HTML4 doctype, "height: 100%;" on the table no longer works; if the content is shorter than the browser window, the footer moves up to where the content ends.

    Is there any way to either (a) keep the table layout but get it to work with HTML4, or (b) redo the site in divs but still have the desired effect (make the footer stick to the bottom edge of the window when the content is shorter than the window height)?

    # October 28, 2008 at 12:51 pm

    Actually, table height attribute wasn’t deprectated. It was never an official attribute of table to start with. It was just one of many attriutes that some browsers supported even though it wasn’t in the spec.

    As to your question though, Chris had an article on here a while back with a link to some sticky footer code. I don’t have Chris’s article handy but here’s the link to the sticky footer code:

    http://ryanfait.com/sticky-footer/

    # October 29, 2008 at 9:43 am

    Thanks. I’ve seen that sticky footer code before and it looks like it could work. Unfortunately, that would mean redoing the site in divs, which would be a much bigger undertaking (we have a whole bunch of sites based on this same table layout). So, I’m trying to fix this but keep the table layout, if possible (at least for the short term).

    On the other hand, I’ve made some progress. Take a look at this:

    HTML:

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


    Logo Site Title
    Sidebar Content Area


    CSS:

    Code:
    html, body {
    height: 100%;
    }
    body {
    margin: 0;
    padding: 0;
    }
    table {
    border-collapse: collapse;
    height: 100%;
    }
    tr.header {
    height: 99px;
    }
    tr.content {
    height: 100%;
    }
    tr.footer {
    height: 22px;
    }

    This almost works. In Firefox, it actually comes out how I want it to – the table fills the height of the browser window, and the middle row expands while the header and footer keep a fixed height. In IE, the table is always 250px taller than the height of the window (I figured this out by placing an absolutely positioned box at the base of the scroll thumb and then adjusting its height until it touched the bottom of the page). I can’t figure out why this is.

    Any ideas? The fact that it works this way in Firefox is encouraging…I’ll probably just have to mess around with IE until I stumble upon a solution.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".