test01.html
this is just the blue robot css and example html to draw a *horizontally* stretchy 3 column layout.
test02.html
An old fashioned tabled layout with stretchy rows.
But NN4 doesn't like the nested table - which should fill the middle row
test03.html
tables/cssp hybrid. Works ok in ie5.5, and degrades in nn4, but NN6 doesn't like the 100% heights either
- the middle row has overflow-y: auto, and should scroll independantly of the window, (which should not scroll)
NB Opera 6 doesn't support overflow, so this is a dead end if any kind of Opera support is required.
test04.html
tables/cssp hybrid using js to write in the bottomRow. This just positions the bottomRow at the
bottom of the window (makes no effort to handle resizing). And flows everything else behind. Not a solution,
just a step along the way.
test05.html
a single relatively position div, with 100% height, where the body has 100px top and bottom padding.
IE5.5, NN6.. but we've lost nn4 here..
test06.html
top - abs positioned div.
middle - 100% width and height relatively positioned div, where the body has 100px top and bottom padding.
bottom - js to grab the inner height and position the div (of known, hard-coded height) appropriately.
snags:
. NN4, will need some workaround to hide the offensive css, and probably js. how far should it degrade??
. resizing. will need to call a function on resize to restore the bottom row.
test07.html
single positioned div that sits at the bottom of the window. CSS only (yay).
This sets the height to 100% then corrects the offset with a negative margin-top property equal to the height of the div.
test08.html
puts it all together.
3rows.html
like test08 but with the nn-offensive css broken out into a imported stylesheet, to degrade gracefully for NN4.
Somewhere in there we broke something as Mac IE5 now shows horizontal scrollbars in the middle row.
With scrollbar styling for effect.
test10.html
testing using a vertically centered object tag with external html data (html file).
Opera likes it,
WinIE5.5 like it.
Mac IE5 complains it doesn't have the plugin :)
Styling background color etc doesn't work however, these properties belong to the embedded file.
test11.html
testing using a vertically centered iframe tag with external src (html file).
Opera likes it,
WinIE5.5 like it.
Mac IE5 likes it
Styling background color etc doesn't work however, these properties belong to the embedded file.
And content is now in a seperate html file, seperate url (introducing new bookmarking/linking problems, and printing problems..
printing and x-browser problems.
A CSS approach allows for the possibility of media-specific stylesheets.
In actual implementation this would be a necessity as the use of hidden overflow means that content would get cropped when printed.
(the same issue exists with iframes).
My approach (not documented here) was to break out the "viewport", or 3rows css declarations into a seperate stylesheet
and using a combination of css techniques, client-side javascript, and ie-only conditional comments include this stylesheet-only when I'm sure it's appropriate for the user-agent or context.