I’ve been playing around with CSS layer positioning in my web designs lately — it’s so powerful and simple, but the real problem is some major inconsistencies across browsers. Namely, the “position:fixed” element — to place a DIV in a consistent location on the page, regardless of the browser’s window size or scroll position.

The biggest problem is that it doesn’t work in Windows Internet Explorer 5 or 6! Works beautifully in Apple’s Safari (my browser of choice) and Mozilla/Firebird/Camino etc. And while it works in IE5 on the mac, there’s a major bug that causes any links within a fixed layer not to work.

There are a number of purely CSS hacks (here and here, for example) that I tried to no avail, so I finally decided I’d try a javascript route. I managed to do it, and while it’s not as elegant as pure CSS, it works! Read on to see how I did it.

I found lots of different javascripts to create “sticky” layers (do a google search on sticky javascript layers and you’ll be delighted with info. But the most useful info was found at this site, which had a basic “sticky menu” script as well as lots of information on manipulation of layers and windows for different browsers.

The problem with using the javascript they have already is that it fixes the menu to the viewport relative to the TOP of the page; my menu was meant to stick to the bottom of the window, as a sort of persistent footer.

I decided to get my hands a little dirty and hack the original code to do what I wanted. Yes I am a script kiddie.

One great thing about this script is that it’s pretty cross-browser savvy, since different browsers support different elements.

The original looks like this:

function movemenu()
{
	if (window.innerHeight)
	{
		  pos = window.pageYOffset
	}

Setting the position in browsers which support the pageYoffset property. Basically, this moves the top of the box to the current offset of the window. Since I want to move it to the bottom, I had to calculate the window size and add it to that yOffset value.

My code

if (window.innerHeight)
	{
		  pos = window.innerHeight + window.pageYOffset 
	}

Pretty simple, if the browser supports it. They’ve got a really cool page that determines what properties your browser supports, which helps a lot, particularly with the next part their code

	else if (document.documentElement && document.documentElement.scrollTop)
	{
		pos = document.documentElement.scrollTop
	}
	else if (document.body)
	{
		  pos = document.body.scrollTop
	}

my code

else if (document.documentElement && document.documentElement.scrollHeight)
	{
		pos = document.body.scrollTop + document.documentElement.scrollHeight
	}
	else if (document.body)
	{
		  pos = document.body.scrollTop + document.body.scrollHeight
	}

Using the page I mentioned I determined how to figure out the value of the bottom of the window.

The actual placing of the layer is done right here:

their code:

	if (pos < theTop) pos = theTop;
	else pos += 30;
	if (pos == old)
	{
		menu.style.top = pos;
	}
	old = pos;
	temp = setTimeout('movemenu()',500);
}

my code:

if (pos < theTop) pos = theTop;
	else pos -= 48;
	if (pos == old)
	{
		menu.style.top = pos;
	}
	old = pos;
	temp = setTimeout('movemenu()',200);
}

The original code adds 30 pixels to the current top of the window, then moves the top of the box to that location. My adjustments subtract 48pixels (the height of my floating box) from the current bottom of the window. I could probably simplify this by setting the bottom of the floating box, but I haven't tried that yet.

Anyway, just thought I'd detail this since it seemed like a pretty successful attempt at getting a persistent Footer across multiple browsers, something I've tried a number of times but not really succeeded at, until now!

Check out the results here:

Life Unlimited under construction site