Forum Moderators: not2easy

Message Too Old, No Replies

Dealing with lateral shift due to vertical scroll bar

In FF and Safari, not in IE

         

henry0

11:52 am on Oct 13, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Using “accordion” or any form of AJAX that expands a page (already loaded) height above the browser height triggers in FF and Safari the vertical overflow bar (MS shows the bar right away), with the direct result of giving a little shaky effect to the page and moving it <- left in direct relation with the overflow bar width, it creates a one second unwanted, ugly kind of shaky effect.

How may I set the body (or anything else) to pre-set room for the vertical bar thus avoiding that left shift effect?
Of course I could (out of desperation) use: overflow-y: hidden;
But one should not be messing with a user browser
Any solution? Any hack?

Thanks

henry0

10:44 am on Oct 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I hate to "Back to the Top" myself.
but I need to know if it's doable or not
thanks

henry0

5:26 pm on Oct 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Since no one seems to know the "how to"
after a zillion of hours surfing all over the place
I found the following that is IE, FF, Safari cross-browser tested, hope it could help
now if you have a better idea, please, share :) or comment the above.
(knowing that CSS is not my major!)

html{
height:100.1%;
overflow-y:scroll;
overflow: -moz-scrollbars-vertical;
}

swa66

10:17 pm on Oct 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'd suggest a few things:

The IE fix: I'd stuff it in a conditional comment and make sure IE8 never gets to see it. We can't let IE8 have any excuse to continue the bugs from the past cause we have the fixes already there ;-).

The overflow-y is CSS3, and the validators for now will flag it as "too soon". I'd add a comment for myself if I were you just to make sure not to forget it.

As I've time I'll play a bit with the -moz "value" on overflow. That's one I didn't know existed.
The documentation for it is at: [developer.mozilla.org...]
And I found it interesting to note it's supposed to also means no horizontal scroll bars will appear. Not sure if that's a problem for you or not.

Aside of that thanks for reporting back what you found.

henry0

11:45 am on Oct 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks for the comments
you are correct about the lateral bar (didn't even noticed it!)
Lateral is no big deal because I never let a site spilling over user available real estate.

SuzyUK

8:26 pm on Oct 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How may I set the body (or anything else) to pre-set room for the vertical bar thus avoiding that left shift effect?

apart from the fact that you're posssibly assuming that everyone is seeing or is going to see this "shift" (shh secret info.. they will never do unless they're comparing pixel perfect pages side by side as per the designers vision!)

How may I set the body (or anything else) to pre-set room

body {min-height: 100.01%;}

substitute "body" for whichever element so fits, but make sure that the inheritance is in place.. alternatively don't worry about the "shift" only pixel perfect designers notice it ;)

henry0

8:35 pm on Oct 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



thanks SusyUK,
My partner is the designer.. he sees it :)