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.
Make your body 101% tall... this will force the scrollbar to always show up.
body {height:101%}
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.
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; }
body {
overflow: scroll;
}
I had the same problem with even the newest Firefox (3.5).
The overflow function saved my life!
This seems to work great for me...
html {
overflow-y: scroll;
}
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>