Table Manners

How can a table fill the screen at all resolutions?

[chowcat]

Could someone please help resolve a little cross browser compatibility problem I am currently experiencing.

I have made a site that uses 1 table, 760 pixels wide and 100% high, with a banner nav and a bottom nav with ...blah blah..blah (content in the middle)! The content in the middle is enough to fill the screen with scroll bars for 800x600 resolution but not for anything larger. So in order to keep everything in the right place on all resolutions I have added a row just before the bottom nav and set the height at 100% to keep everything that should be at the top of the page at the top, and everything that should be at the bottom of the page....at the bottom. It works fine in explorer but in opera and netscape it adds a huge gap (almost the size of the viewable space again in netscape and a smaller but still significantly disturbing one in opera). I would appreciate some advice on how to overcome the problem correctly.!

Thanks.

[tedster]

There are many quirks in how browsers render table height. Even the W3C table height spec for CSS2 [w3.org] leaves many decisions up to the individual browser.

Are you trying to keep the footer at the bottom of the screen, or the bottom of the page?

[chowcat]

At the bottom of the screen, regardless of the screen resolution.

[tedster]

I don't know of a cross-browser method to do that with tables. I'm guessing it will take some DHTML - read the window size and use that number in some calculations...and watch out for window resizes.

Here's a link to a liquid positioning script [dansteinman.com]. It positions an item in anyone of 9 window positions - left, right or middle for top, center or bottom - and maintains those positions when the window is resized. Maybe it will offer some inspiration.