HTML CSS LAYERS

Question

i created a page on which i tried to attain the effect of bottom aligned tool bar like the one face book has. For that i made a div with highest z-index set the position to fixed and set the bottom 0 like

#bar
{
 z-index  : 11;
 position : fixed;
 bottom   : 0;
 height   : 50;
 left     : 0;
 right    : 0;
}

it works fine but while scrolling it seems like the page takes time rendering, like the page is heavy, scrolling is smooth but the page rendering is just a little slow that produces a not so good scroll effect. Did anyone know whats up...

or did you even get me :p

Answer 1

Position:fixed in itself shouldn't be causing these problems.

It sounds like the browsers are just being slow in rendering your page. Is the page large or complicated? This could be caused by over complicated HTML, CSS and especially Javascript.

Try simplifying (or disabling, for JS) each one in turn.

(I'd look hard at any JS events or and CSS that uses the * selector.)

Answer 2

If you've got a "background-attachment: fixed" rule that may also be causing similar problems. Another issue you have to be careful about is IE6 doesn't support position: fixed, so you have to do it with JavaScript - which also slows down the website.

Answer 3

If that bottom bar is at the bottom of the HTML-code, it will be loaded (and rendered) after everything else. If the rest of the page is big (silly code, complex javascripts or giant images), this will probably make everything worse, as styles are applied more or less continously as the page loads.

Simple way to check this: Recreate the bottom-bar at a super simple page and see if you get the same effect. If so, your page is probably to big or complicated.

Or your computer is just plain slow :-)