test3.html adds tr to the header element and converts the padding to height but then the navigation is gone in chrome. The #headerbar (navigation) has to be pushed down for reasons I can’t now remember (derp) but I think has to do with the way I made the 2nd list element (the one with the shield and 2 rows of link text).
test4.html just adds tr to header but doesn’t change the height/padding.
Also, test3 and test4 show up differently for me between FF and Chrome. test3 looks good in FF for me except that the navigation is too high (you can’t see the city shield). test4 is other weird stuff.
test5 keeps original height and padding but adds a container tr (like test2) but also adds height:1px, I think this is the winner
I was under the impression you needed ONLY one of these working to go off of? I was purely testing off test4 and got it working completely on my end. Either way, you have a winner.
Yes it’s the height:1px that stops the table rows from spreading out and the reason that my sticky footer approach works (which is basically the method you are using) but you originally forgot the height:1px on the header which then allows the content to stretch as required between the header and footer. Otherwise the cells/rows try to evenly distribute between the 100% height.
Removing the trs would have no real effect (as seen in some of your demos) because for the table to have integrity the browser would automatically create anonymous table rows and table cells so that the structure is correct. i.e. you can’t have an element next to a tr without that element also being in a tr so the browser constructs an anonymous tr with the downside that you can’t target or style it any more.
As you now have the slideshow in the header then effectively it ignores the table altogether and works from the body which is why you needed to change the z-index to stop the element moving behind the body background.
The solution I gave you at the start should also have worked in modern browsers and indeed should have been able to fill the cell automatically without setting a height for the background image but I guess that wasn’t the criteria you wanted. As long as you are happy with setting a fixed height then your current method should work back to IE9.
Test5 was just a blank test of the page. Either way, I had randomly chosen test4 to work on since it seemed like the fix would be the easiest. My time and effort is volunteered, although you’re very welcome :).
