Footer
Chris Seidel
I have a div with these css props:
margin-bottom: 1em;
position: absolute;
The div is a footer element which - as its name says - should always be at
the bottom of the page.
It works fine as long as there is no vertical scrollbar on the page.
Otherwise, if I scroll down, the footer keeps its position relative to the
top of the page, so it scrolls up and does not stay on the bottom.
Can this be solved with css?
Thank you
Beauregard T. Shagnasty
> I have a div with these css props:
> ...
> The div is a footer element which - as its name says - should always
> be at the bottom of the page.
>
> It works fine as long as there is no vertical scrollbar on the page.
> Otherwise, if I scroll down, the footer keeps its position relative
> to the top of the page, so it scrolls up and does not stay on the
> bottom.
>
> Can this be solved with css?
Have a look and study of these examples:
http://www.nrkn.com/3ColEqualPositioned/
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm
--
-bts
-Friends don't let friends drive Windows
dorayme
"Chris Seidel" <cse...@arcor.de> wrote:
You might get an idea or two from
<http://dorayme.netweaver.com.au/stickyFooter.html>
and
<http://dorayme.netweaver.com.au/stickyFooterLittleContent.html>
--
dorayme
Chris Seidel
> <http://dorayme.netweaver.com.au/stickyFooter.html>
>
> and
>
> <http://dorayme.netweaver.com.au/stickyFooterLittleContent.html>
Could you please explain how this works?
It seem that #wrapper {height: 100%;} is the trick?
Chris Seidel
> Have a look and study of these examples:
> http://www.nrkn.com/3ColEqualPositioned/
> http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm
Hm, I cannot see how this can help me...
Beauregard T. Shagnasty
You said, ".. Otherwise, if I scroll down, the footer keeps its position
relative to the top of the page, so it scrolls up and does not stay on
the bottom. Can this be solved with css?"
In the two examples I gave you, the footer does stay on the bottom when
you scroll. It's done with CSS - what you asked.
Ben C
> Hi,
>
> I have a div with these css props:
>
> margin-bottom: 1em;
> position: absolute;
>
> The div is a footer element which - as its name says - should always be at
> the bottom of the page.
Did you mean bottom: 1em?
> It works fine as long as there is no vertical scrollbar on the page.
> Otherwise, if I scroll down, the footer keeps its position relative to the
> top of the page, so it scrolls up and does not stay on the bottom.
>
> Can this be solved with css?
Yes. There are three places for a footer:
1. Bottom of the viewport (what you've got)
2. Bottom of the content
3. Whichever of 1 and 2 is lower.
Evidently you don't want 1.
If you want 2, you can make BODY position: relative, which will put the
footer 1em from the bottom of BODY, including if BODY overflows the
viewport (assuming your div is basically inside BODY and not nested in
other positioned stuff).
If you want 3, you need to also give BODY min-height: 100% (and set its
margins to 0). To make the percentage work on BODY give the root element
(HTML) height: 100% (or min-height: 100%, but it doesn't really matter
if BODY overflows HTML).
jeff
Google position: fixed. Will not work in IE6 without a fix.
Jeff
Chris Seidel
> Google position: fixed. Will not work in IE6 without a fix.
That's it!
Thank you ;)
Chris Seidel
> jeff wrote:
>
>> Google position: fixed. Will not work in IE6 without a fix.
>
> That's it!
Damned - does not work in IE, doesnt matter if IE6, 7 or 8.
Works fine in Firefox and Chrome.
What is the problem here?
Thank you
Kevin Scholl
Google for "sticky footer".
Chris Seidel
OK this works, but I need to change all my pages to add the wrapper and
footer divs.
Why doesn't position:fixed work in IE?
Jonathan N. Little
Ask the MS IE development team.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Chris Seidel
>> OK this works, but I need to change all my pages to add the wrapper
>> and footer divs.
>> Why doesn't position:fixed work in IE?
>
> Ask the MS IE development team.
I would like to know if it SHOULD work, because it is defined so in the css
specification.
Thus - is it a bug in IE or is it a feature of FF?
Beauregard T. Shagnasty
> Jonathan N. Little wrote:
> [Chris wrote this:]
>>> OK this works, but I need to change all my pages to add the wrapper
>>> and footer divs.
>>> Why doesn't position:fixed work in IE?
>>
>> Ask the MS IE development team.
>
> I would like to know if it SHOULD work, because it is defined so in
> the css specification.
A. Yes, it SHOULD work.
> Thus - is it a bug in IE or is it a feature of FF?
A. It is a bug^Werror by Microsoft IE development team, who doesn't
seem to care much about standards.
A2. Firefox follows standards, so no it isn't a feature. Check other
standards-compliant browsers, such as Opera.
jeff
It is supported in later IE versions, which is why I noted the need
for a fix in IE6.
Support for CSS improves, in all browsers, with time. IE tends to
lag. When you have an IE problem, you should note the IE version and
check one of the browser support tables.
http://www.quirksmode.org/css/contents.html
Note the note about position: fixed support lacking in IE5 and IE6.
Nobody cares about IE 5 anymore, but you should know what is happening
in IE6.
I tend to "normalize" IE6 with IE7 with a bit of javascript, group
regulars don't like javascript, so I am the only here that does:
Whatever you write, it should be readable with CSS and js off,
although it does not have to look right.
Jeff
Jonathan N. Little
> Support for CSS improves, in all browsers, with time. IE tends to lag.
> When you have an IE problem, you should note the IE version and check
> one of the browser support tables.
Now that is an understatement! CSS2.1 been around for about 10 years, we
wouldn't want to rush into it.
http://people.usd.edu/~bwjames/humor/ms/motto.html
Microsoft Motto
jeff
> jeff wrote:
>
>> Support for CSS improves, in all browsers, with time. IE tends to
>> lag. When you have an IE problem, you should note the IE version and
>> check one of the browser support tables.
>
> Now that is an understatement! CSS2.1 been around for about 10 years, we
> wouldn't want to rush into it.
Maybe if they ever finished working on the draft, we could get somewhere:
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
W3C Candidate Recommendation 23 April 2009
The web has a mixed history of vendor created standards, that were
later adopted, and W3C standards that are cobbled together and supported
adhoc over time.
No browser supports everything in CSS2.1.
Jeff
>
> http://people.usd.edu/~bwjames/humor/ms/motto.html
> Microsoft Motto
>
Jonathan N. Little
Jonathan N. Little
> Jonathan N. Little wrote:
>> jeff wrote:
>>
>>> Support for CSS improves, in all browsers, with time. IE tends to
>>> lag. When you have an IE problem, you should note the IE version and
>>> check one of the browser support tables.
>>
>> Now that is an understatement! CSS2.1 been around for about 10 years,
>> we wouldn't want to rush into it.
>
> Maybe if they ever finished working on the draft, we could get somewhere:
>
> Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
> W3C Candidate Recommendation 23 April 2009
>
> http://www.w3.org/TR/CSS21/
True, but having the most widely used browser stagnate for a decade did
not help.
>
> The web has a mixed history of vendor created standards, that were
> later adopted, and W3C standards that are cobbled together and supported
> adhoc over time.
>
> No browser supports everything in CSS2.1.
>
True, but while they missed here and there on some of the more obscure
properties, IE until its most recent incarnation, didn't even come close
to supporting the basics...
jeff
> jeff wrote:
>> Jonathan N. Little wrote:
>>> jeff wrote:
>>>
>>>> Support for CSS improves, in all browsers, with time. IE tends to
>>>> lag. When you have an IE problem, you should note the IE version and
>>>> check one of the browser support tables.
>>>
>>> Now that is an understatement! CSS2.1 been around for about 10 years,
>>> we wouldn't want to rush into it.
>>
>> Maybe if they ever finished working on the draft, we could get
>> somewhere:
>>
>> Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
>> W3C Candidate Recommendation 23 April 2009
>>
>> http://www.w3.org/TR/CSS21/
>
> True, but having the most widely used browser stagnate for a decade did
> not help.
>
haven't been stagnating with IE.
IE 6 was much better than IE5, IE7 is much better than IE6, and IE8 has
pretty good support all around. I code for IE7 support level and I'm
fairly happy with that. Of course, IE did set a low bar with IE5.
FireFox has had it's issues too. Netscape (4 and 6) was terrible.
Designing for the web has always been waiting for the worst browsers
to die. Anyone who doesn't believe that has never had to accommodate NS4!
>>
>> The web has a mixed history of vendor created standards, that were
>> later adopted, and W3C standards that are cobbled together and
>> supported adhoc over time.
>>
>> No browser supports everything in CSS2.1.
>>
>
> True, but while they missed here and there on some of the more obscure
> properties, IE until its most recent incarnation, didn't even come close
> to supporting the basics...
>
What is it that IE7 missed that has you so disappointed? I don't see
much in basics I want that it doesn't have. I am a little late getting
on track with some features though and maybe I'm missing something I
should be wanting! I just started using first-child and + within the
last year.
With all that said, if IE just disappeared tomorrow, I'd probably
celebrate!
Jeff
>
Chris Seidel
> It is supported in later IE versions, which is why I noted the need
> for a fix in IE6.
I have tested the "sticky footer" with position:fixed in IE 7 and 8 too.
Same (buggy?) behavoiur like in IE 6.