Table based layout problem

[davidbjames]

For those of you still familiar with laying out a page with a table, I need a little help. Here is the sample page

Everything works great, except when stretching the browser window down, gaps appear above and below the divs in the header. I've tried everything to make this go away, and still retain all the benefits of the structure of the page. I've tested on Mac Firefox, Mac Safari, and Windows IE and only Safari gets it right.

(For those wondering why I am doing a table-based layout, let's just say it's for experimental purposes only. )

[deathshadow]

Ok, I'll use a table to get columns... but for full spans before and after? That's just asking for layout issues.

Though your problem does NOT appear to happen in Opera either, I can't say I'm too surprised at your results... and it's thead that's causing your problems - both Gecko and Trident (the engines behind FF and IE respectively) automatically add padding around thead and I've yet to find a way to stop either from doing that - which is why I generally don't bother using thead/tbody/tfoot and just put my content in flow order.

Oh, BTW, it's bad when you have so much commenting you can't figure out what anything actually does.

Actually, nevermind, I just found the real problem - you're trying to use a percentile to pad out content when the rest of the heights are in px. /FAIL/ hard. Attempting to stretch a table to fit the entire browser window USUALLY doesn't work...

AND WHY in names sake are you nesting DIV there in the first place, you should just be styling it's parent container (the TH)

[davidbjames]

Thanks for the reply.

Just so you know I assigned the <div>s for Header and Extra a color different from the <td>background, to demonstrate the problem. Per your suggestion, I tried removing <thead> and that doesn't make a difference. Besides, it happens *between* the rows, and not just around the padding of the <thead>

Sounds to me like Opera is rendering it like Safari does (right).

[deathshadow]

The 'big' issue (took a closer look, deleted all your comments so I could actually FIND the code) is that you are using body {height:100%} - Trident and Gecko both choke bad with tables on that... I'm assuming you are doing that to try and make sure the table is always browser windows size - this works 'after a fashion', but don't expect to be able to declare the heights of your table elements and have it stay the same when resized... ALTHOUGH (one moment, brainstorm)

What if you absolute positioned the headers, then set a padding-top in each TD in content - I know that sounds kinda wierd, but it would let you 'fix' the height while still having the table fill the whole screen.

Oh, BTW, it does render different in Opera - it ignores the height:100%;

[davidbjames]

The reason for using the <div>s inside the <th>s is because it was the only reliable way I could find to set the height of the cells. IE/Win would keep adding way too much space (I checked out some common problems via google regarding the expanding box problem, tried everything). divs were the only thing that ensured a minimum height. On top of that I had to set the cells to a height of 1px. This solved the prob for the main browsers I test in.

The excessive commenting is for my use only -- this layout page will become a reference for me. Sorry for the difficulty.

Attempting to stretch a table to fit the entire browser window USUALLY doesn't work...

I thought that was what was so bleeding wonderful about table based layouts!? Strange...

{height:100%} - Trident and Gecko both choke bad with tables on that...

Actually, Safari is the only browser that does EXACTLY what I expect.

I tried the absolute positioning, and it didn't work.