When you go to page on my website where there is extra content, the scrollbar appears on the right, but it has a notiable shift to the left for my content. You notice this by clicking home and then hosting and back again on my site (www.ipalaces.org)
How can I account for the browser scrollbar on my pages? Can I make it so the scrollbar is always visible atleast?
My website is www.ipalaces.org, please let me know.
Well, it depends on the browser.
body {
overflow-y: scroll;
overflow-x: scroll;
overflow: -moz-scrollbars-vertical;
}
Should force the horizontal (overflow-x) and vertical scrollbars (overflow-y) to be displayed. Though I recall that Opera sometimes fails to respect the declaration, unless it's on an element within the <body> (divs and the like).
Edited with regard to @wsanville's, and @BHare's, comment.
Make your body 101% tall... this will force the scrollbar to always show up.
body {height:101%}
Give this a try... I know its ugly but it may be the only way.
#force_scroll {
width:1em;
position:absolute;
top:0;
bottom:-0.1px;
z-index:-1;
}
And then in your HTML somewhere (preferably right before your </body>):
<div id="force_scroll"></div>
body {
overflow: scroll;
}
I had the same problem with even the newest Firefox (3.5). The overflow function saved my life!
I've tested this on IE6, IE7, IE8, Firefox 3, and Chrome, and the simple way to have a vertical scroll bar always visible is simply:
html { overflow-y: scroll; }