I have added margin-bottom: 30px; to the 'main' div (all code below),
in an attempt to leave 30 px permanently at the bottom of the page.
But when the content of the main div extends beyond the bottom of the
screen and a scroll bar appears, it stops scrolling after the border
of main and ignores the margin. What's the problem? Thanks!
Well bust mah britches and call me cheeky, on Tue, 01 Jan 2008 12:59:36
GMT Bazley scribed:
> I have added margin-bottom: 30px; to the 'main' div (all code below),
> in an attempt to leave 30 px permanently at the bottom of the page.
> But when the content of the main div extends beyond the bottom of the
> screen and a scroll bar appears, it stops scrolling after the border
> of main and ignores the margin. What's the problem? Thanks!
>
>
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
>
>
> mysite
>
>
>
>
>
> help help help help help help help help help
> >help help
>
> help help help help help help help help help
> >help help
>
> help help help help help help help help help
> >help help
>
> help help help help help help help help help
> >help help
>
> help help help help help help help help help
> >help help
I dunno, I think it's a long-time flaw in the way Moz and IE typically
render. Probably your best bet is to put a 30-px height div after
"main".
--
Neredbojias
Riches are their own reward.
Re: vertical scrolling + margin-bottom
am 01.01.2008 21:53:38 von dorayme
In article
<386bbc3e-3b81-4478-a527-a09619ebf27f@f3g2000hsg.googlegroups.com
>,
Bazley wrote:
> I have added margin-bottom: 30px; to the 'main' div (all code below),
> in an attempt to leave 30 px permanently at the bottom of the page.
> But when the content of the main div extends beyond the bottom of the
> screen and a scroll bar appears, it stops scrolling after the border
> of main and ignores the margin. What's the problem? Thanks!
>
>
....
>
>
> help
>
I last snip your doc at the point it goes wrong. Why bother with
XHTML anyway?
But let us not quibble; more importantly, why so much specifying
for heights? Try this simpler variation:
On 1 jan, 07:59, Bazley wrote:
> I have added margin-bottom: 30px; to the 'main' div (all code below),
> in an attempt to leave 30 px permanently at the bottom of the page.
> But when the content of the main div extends beyond the bottom of the
> screen and a scroll bar appears, it stops scrolling after the border
> of main and ignores the margin. What's the problem? Thanks!
Hello Bazley,
It is always better and preferable to upload all your code into a
webpage and then just post an url to such webpage. Over here, I have
to do all that so that I can examine your webpage. Other readers of
your post wishing to examine your code and provide some explanations,
feedback have to do the same thing too.
Why a transitional DTD? Your HTML document is certainly, definitely
new.
Also, why XHTML... if you are going to serve that HTML document as
"text/html" and not as "application/xhtml+xml"?
>
>
>
>
> mysite
>
Is all your CSS code in the sample below .. or is there more in
mysite.css? Again, uploading your code into a webpage and then posting
an URL would be better for everyone.
>
>
>
>
> help help help help help help help help help he=
lp help
>
> help help help help help help help help help he=
lp help
>
> help help help help help help help help help he=
lp help
>
> help help help help help help help help help he=
lp help
>
> help help help help help help help help help he=
lp help
You are re-declaring the 4 margins of your #main node here, otherwise
you had earlier a CSS syntax error.
> width: 300px;
> min-height: 750px;
1- If you want the root element and the body element to fill the
user's browser window viewport's height, then why do you set the #main
to a min-height value? Your CSS declaration is not coherent with the
CSS rules before.
2- If you want the root element and the body element to fill the
user's browser window viewport's height, then why don't you remove the
#main node and transfer its declarations to the body node? Your #main
node duplicates entirely the purpose and function of the body node in
your code. Your DOM tree could be reduced here.
3- if you explicitly wanted to remove the margin-top and margin-bottom
to the body node, then why do you later explicitly set, add a margin-
top and a margin-bottom to the #main node? What you are doing does not
seem to me to be perfectly coherent... otherwise your stylesheet and
DOM tree could be optimized, more compact.
Regards, G=E9rard
--
Internet Explorer 7 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Re: vertical scrolling + margin-bottom
am 01.01.2008 22:30:28 von Ben C
On 2008-01-01, Bazley wrote:
> I have added margin-bottom: 30px; to the 'main' div (all code below),
> in an attempt to leave 30 px permanently at the bottom of the page.
> But when the content of the main div extends beyond the bottom of the
> screen and a scroll bar appears, it stops scrolling after the border
> of main and ignores the margin. What's the problem? Thanks!
[...]
> body {
> height: 100%;
This is the first part of the problem. Since body is height: 100%, it's
only the height of the html element, which is the height of the viewport
(you also set height: 100% on that).
#main is much higher than the viewport, so it overflows the body.
There's therefore not going to be a gap of 30px between the bottom of
#main and body.
The browser just allows you to scroll to the bottom of #main and no
further. Maybe some browsers let you scroll to the bottom of its margin,
but they don't have to.
So first remove height: 100%. Now you will find it still doesn't work
because #main's bottom margin collapses against the bottom margin of
body. You want that margin between the bottom of #main and the bottom of
body.
So give body 1px of bottom padding and that will prevent its bottom
margin collapsing against its child. You can change #main's margin to
29px if you're bothered by the 1px.
Or just put 30px of padding-bottom on body and don't use a bottom margin
on #main at all.