CODEWITHSUNDEEP
csshtml
Moon
Moon

Reputation: 20022

HTML CSS LAYERS

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

Upvotes: 0

Views: 228

Answers (3)

Arve Systad
Arve Systad

Reputation: 5479

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 :-)

Upvotes: 1

Mehmet Duran
Mehmet Duran

Reputation: 176

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.

Upvotes: 0

edeverett
edeverett

Reputation: 8218

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.)

Upvotes: 2

Related Questions