fixed positioning..

[Frances Del Rio]

don't know if I'll succeed, have spent a lot of time already trying to
figure this out: I would like to position a footer (co. name, address,
etc..) at the bottom of browser page, in such a way that it's always at
the bottom no matter how high the screen is ('clientHeight' in browser
model) and that stays there when user scrolls.. in the "official" CSS
specif's (http://www.w3.org/TR/REC-CSS2/visure...ed-positioning)
I found this:

BODY { height: 8.5in } /* Required for percentage heights below */
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}

I changed it to this, to fit my needs
BODY {height: 600px}
#footer {position:fixed ; bottom:20px; left:150px}

and I have to say it works beautifully; only problem is: IT DOESN'T WORK
IN IE!! it only works in Netscape.. help please.. why does this not
work in IE?? (and this is not indicated in the w3c.org site I mentioned
above where I got this from..) thank you.........

Frances Del Rio

[Lachlan Hunt]

Frances Del Rio wrote:

I would like to position a footer ... at the bottom of browser page,
in such a way that it's always at the bottom no matter how high the
screen is and that stays there when user scrolls.
Note, that for web pages, the screen height is irrelevant. It is the
viewport height that is important. This may be what you meant, but
viewport is the correct term, and useful to know for future reference.
in the "official" CSS
specif's (http://www.w3.org/TR/REC-CSS2/visure...ed-positioning)
I found this:
Good, the spec is always a good place to start.

BODY { height: 8.5in } /* Required for percentage heights below */
#footer {
position: fixed;
...
}

I changed it to this, to fit my needs
BODY {height: 600px}
#footer {position:fixed ; bottom:20px; left:150px}

and I have to say it works beautifully; only problem is: IT DOESN'T WORK
IN IE!!
In general, IE only really supports CSS1. but even then, not fully.
Fixed positioning is a CSS2 property, which it does not support, and
will not likely do so any time this century.
it only works in Netscape..
It also works in Mozilla (which Netscape is based on), Opera, Safari and
several more less popular user agents.
help please.. why does this not
work in IE?? (and this is not indicated in the w3c.org site I mentioned
above where I got this from.

W3 does not publish, at least in their specifications, which browsers do
and do not implement features of their specifications. They do publish
test case results, but in general, browser support charts are done by
third parties.

In order to do what you wish, you will have to fake it using absolute
positioning. The simplest method is to use something like this
<div id="content">
<p>insert content here</p>
</div>
</div>
<div id="footer">
<p>...</p>
</div>

body { height: 100%; overflow: scroll; }
#content { margin-bottom: 3em; }
#footer { position: absolute; bottom: 0; left: 0; height: 3em;
background: white none; color: black; }

This is a very simple example, and you may get additional problems later
on. But it's a good start, and while learning it's easier to keep
everything simple. Unfortunately, IE also does not support setting both
'top' and 'bottom' together, or 'left' and 'right' together, so you
cannot successfully use this:

#content { position: absolute; top: 0; bottom: 3em; overflow scroll; }

The #content with the bottom margin is so that the content can scroll
up above the footer, so that the footer does not overlap. You need to
set a non-transparent background on the footer so the main content does
not show through while it is underneath.

--
Lachlan Hunt
http://www.lachy.id.au/

Please direct all spam to ab***@127.0.0.1
Thank you.