Locking an element (div) to the top or bottom of the browser window.

Gmail does this when it says "Sending.." or "working.." even when
you scroll down the page the little box stays top and center.
Perfectly smooth.

www . comodo . com does this, their logo in the bottom right.

How is this done?

re: Locking an element (div) to the top or bottom of the browser window.

position: fixed;

or some Javascript if IE

re: Locking an element (div) to the top or bottom of the browser window.

position:fixed works in IE 7 and 8 now :)

re: Locking an element (div) to the top or bottom of the browser window.

ah, so they finally did it? ;)

re: Locking an element (div) to the top or bottom of the browser window.

This is my css/html. Works perfectly in FF. In IE the z-index is ignored and when I add things to the UL it pushes things down.

re: Locking an element (div) to the top or bottom of the browser window.

Could you please elaborate on "pushes things down"?
Please note that the z-index will only work for elements that have an position:absolute (or I position:relative too).....

re: Locking an element (div) to the top or bottom of the browser window.

In firefox the ul expands the div that its in. it just overlays whats underneath it.
In IE rather than lay on top of content it disobeys the z-index and moves the content down as items are added to it.

re: Locking an element (div) to the top or bottom of the browser window.

Hmmm in FF position fixed work with z-indicies.

re: Locking an element (div) to the top or bottom of the browser window.

Ok I think I experienced something similar once...where elements with a style of position:relative were appearing on top of elements with a style of position:fixed or position:absolute.

To fix this I had to move the position:fixed element under the position:relative element in the HTML.

For example, this wouldn't work:
But this would:
You can move the position:fixed element to the appropriate place on the page using CSS styles....

re: Locking an element (div) to the top or bottom of the browser window.

More markup than I wanted, but it works :) Thanks for your help!

re: Locking an element (div) to the top or bottom of the browser window.

I was mistaken. I should have known. This loses the fixed position part of it that I needed. so it behaves as it should, but it stays at the top of the page rather than the top of the browser window.

re: Locking an element (div) to the top or bottom of the browser window.

You shouldn't wrap the position:fixed div in a position:absolute div...this is probably why you're having problems......

re: Locking an element (div) to the top or bottom of the browser window.

makes sense. But fixed stll doesn't do what I think ti should in IE. Instead of putting it at (0,0) its putting it on the page where it is in the HTML.

re: Locking an element (div) to the top or bottom of the browser window.

I just tested it and it's positioned at 0,0 for me in IE (8):

re: Locking an element (div) to the top or bottom of the browser window.

Even when I paste your code and take mine out... it still shows up inline rather than 0,0

Could doc type affect this?

re: Locking an element (div) to the top or bottom of the browser window.

What?
I don't know about the doctype...maybe.
But I think it's more likely to be some other style that you've applied on the page?

re: Locking an element (div) to the top or bottom of the browser window.

This is the basic layout of what my page was when I was testing:

re: Locking an element (div) to the top or bottom of the browser window.

You're most likely right... I'll experiement

my code def works if I make a new document. hmmm

re: Locking an element (div) to the top or bottom of the browser window.

I don't knwo what it was exactly, but I strted running my document through a validator and fixing the errors, and it started working after I fixed the first few! Thanks ! :)

re: Locking an element (div) to the top or bottom of the browser window.

Haha :)
Yeah fixing your code so that it's valid is tedious, and can sometimes be very annoying and frustrating; but it usually does the trick.