473,324 Members | 2,511 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

fixed positioning..

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

Jul 20 '05 #1
1 2440
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.
Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: Paul Trautwein | last post by:
I'm trying to get an image to float in a window despite scrolling. I've gotten it to work on my Mac using IE 5.2, Netscape, and Safari, but it goes wonky when I test it on a PC. (testing with IE...
6
by: Mason A. Clark | last post by:
Masters: On two or three-column layouts, one column often has a list of links. Scrolling the page hides them. I'm aware there's supposed to be the ability to fix the column (frame-like). I...
10
by: CMAR | last post by:
Mason C. posted an here an innovative technique for using Javascript and CSS to accomplished fixed positioning that works with IE. Does anyone have the URL of his homepage? Thanks, CMA
25
by: Michael Schuerig | last post by:
I'm trying to do something seemingly very simple, but it's brought me close to crushing my head on the keyboard. All I want is a table where the head row is fixed and the body columns below are...
3
by: Axel Siebenwirth | last post by:
Hi, I would really love to get some help from you since I am starting to become completely desperate with something quite simple... I am trying to transfer a fixed-positioning-implementation...
5
by: msubodh | last post by:
I have been able to piece together the following code to created a fixed div so that it stays in place even when scrolling (and does it smoothly as opposed to other approaches that have jerky...
31
by: Sarita | last post by:
Hello, this might sound stupid, but I got a really nice homepage template which unfortunately is a 3-Column Fixed Width CSS format. Now I don't have any content for the right column and would...
2
by: soulmach | last post by:
Hello forum friends. I performed a search on this topic, but I couldn't find anything useful. I wasn't really sure what to search. First I'll state what I am trying to do. I recently agreed to...
9
by: Mr Prister | last post by:
I've tried to create a sidebar that uses the fixed positioning property. However after looking through various tutorials and how to's of the web I can't find a bugger wrong with my code. This is...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.