Don - HtmlFixIt.com wrote:
> Step one is here: http://bestfoot.com/dummy/test001.html Question:
> why does my blue gradient not extend from top to bottom of page?
> There is a margin both top and bottom. Where is that coming from?
>
> As near as I can figure it is the width of the scroll arrow at the
> top and bottom.
The "scroll-arrows" have nothing to do with it.
It is what's known as 'collapsing margins'[1]. The paragraphs inside
#bgwrapper has default margins - and they overshoot/escape the
#bgwrapper-container.
Note also that browsers have differences in their defaults, so you
better set those paragraph-margins yourself if you want it to look the
same across browser-land.
#bgwrapper{padding: 1px 0px;}
...will keep those margins from overshooting.
> If I add overflow:hidden it runs top to bottom in ff, but not in ie7
> (I'll worry about ie6 later), it works in ff (the overflow isn't
> hidden ... there is a scroll bar) but in ie7, it chops off the extra
> content.
All IE7 betas (or whatever they call them) are broken. A waste of time
to design for them now. Focus on IE6 instead, and add whatever fixes IE7
may need once there's a somewhat stable IE7-final to check in.
> Last if you go to: http://bestfoot.com/dummy/test002.html you will
> find that it doesn't stretch at all if there is insufficient content.
Sounds, and looks, pretty reasonable :-)
Add...
html {height: 100%;}
...so #bgwrapper get a complete 'height: 100%' chain back to the
root-element to calculate the 'height: 100%;' from.
Just note that it won't ever stretch further than the height of the
browser-window that way. It becomes "height-restricted" to 100% of window.
Adding...
#bgwrapper{display: table;}
...will overcome that restriction in the good browsers, since that's how
CSS tables (and HTML tables) should work - 'height' becomes 'min-height'.
IE6 is so buggy that it'll overcome the height-restriction without
knowing why. Oh, well... it's the 'Layout bug'[2].
No IE7 beta seems to be able to do it right - yet, so I have no idea how
it will render in any of those. Won't bother to check either.
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
