Forum Moderators: open
This is opposed to scrollbar behaviour in IE, which seems to "reserve" some permanent space for the scrollbar, whether present or not, allowing the content to stay in place when there is the need for a vertical bar.
I favor the latter (IE) behaviour, as it allows me to better design a page that always looks good (having the content bottom frame staying well lined-up below the navigation top frame), whether or not there is a scrollbar in the content frame.
Would there be a way to make netscape/mozilla act the same, meaning reserving space for the bar when it's not present?
Regards, Charles
HTML (anywhere on the page):
<div id="scroll"></div>CSS:
#scroll {
position:absolute;
top:0;
bottom:-0.1px;
width:1em;
z-index:-1;
}All it does is place a div just below the bottom of the page, which means that the scrollbar is always present.
I have noticed that div overflow:auto does the same, but now also for IE:
If there's a scrollbar present (much content), then the div content is "compressed" and lines neatly up with the remainder of the site. But if there's little content and no scrollbar there, then the content "expands" to take up the space of the scrollbar. And gone is the graphical line-up.
Hell.
The bottom frame has most site content and usually does have a scrollbar.
Everything lines up in IE, not in Mozilla/Firefox.
I guess I can use javascript to sniff the browser and scoot the top content over a bit if needed but that seems clunky...I could make a scrollbar always be on top but there's nothing to scroll there, that makes no sense.
If anyone has a solution I'd love to hear it...
It's sometimes a good thing that 95% of all internet users apply IE... It's never too late for other browsers to learn of the good IE things.
C.
Ultimately I'll probably JS sniff the browser and if it's Mozilla, I'll add a matching scrollbar to the top frame so everything lines up.
I've looked in several places and not found an answer, I assume you haven't either?
<script type="text/javascript">
function Measure() {
if (document.body.scrollHeight > document.body.clientHeight) {
document.body.style.paddingRight = "0px";
} else {
document.body.style.paddingRight = "15px";
}
}
</script><style type="text/css">
body { padding-right: 15px; }
</style><body onresize="Measure();">
Start with padding-right: 15px (width of the scrollbar)
Then, what this is saying is, if there is a scrollbar present, remove the padding. If not, then put it back. In FF, the onresize event doesn't fire until you release the mouse button, so you may see a quick jump.
This is real rough and thrown together quickly, but it does work. Spending a little time with the concept could probably get something working quite nicely.
If you set OVERFLOW: auto; on the <body>, you don't even need to hide this from IE. You could even get fancy and put a 15px wide <div> nailed to the right side of the page with a background image of a scrollbar in it that you show and hide as needed.
CSS:
#scroll {
position:absolute;
top:0;
bottom:-0.1px;
width:1em;
z-index:-1;
}
----
is unnecessary.
If you want the scrollbar to remain visible, just use overflow:scroll.
The javascript does seem interesting though (I've had a similar problem before).
My post goes along with the subjcet, but no quite, here is why.
I'm doing a site with a small frame in the left (menu) and the main in the right. it's optimized for 1024*72, and has scroll in auto, even if at this stage scrollbars are not need. However, I've tryed it with 800x600, and the menu (frame on the right), makes a horizontal scroll bar, because of a couple of px. I don't want to give those extra px away, so my question is: is there a way of disabble the horrizontal scroll bar? Any ideas.
no css please
Your answer is css.
overflow-x: hidden;
(apparently, this is non-standard though)
I've decided not to worry about it.
Your answer is css.
overflow-x: hidden;
(apparently, this is non-standard though)
It's non-standard, and it doesn't work in Firefox 1.0 or Mozilla 1.7 and lower. It has, however, been introduced into Mozilla 1.8 Alpha, so it will be available for Firefox 1.1 when that is released sometime next year.
In the meantime, Lance's Javascript solution in message #7 is probably the most effective.
In IE it knocks it over so I have almost exactly the opposite problem.
I think I still need the browser detect script.
