...

View Full Version : Scrollbar



Tomi
11-22-2009, 05:37 PM
I think this is XHTML/CSS related.

I'm using a Jquery script on my website to expand a div. When doing this the page becomes bigger and so the scroll bar appears on the right side of the screen which kicks my website about 25px to the left. Normally this wouldn't be a problem however since its a sliding script which visually slides out the jump makes it look a bit rubbish and jerky.

Is there anyway I can stop it from pushing my website to the left when the scroll bar appears?

Excavator
11-22-2009, 05:48 PM
Hello Tomi,
The only real solution to that is forcing the scrollbar all the time. That way, there is no jog over when it's needed.

Have a look at this - http://nopeople.com/CSS/vertical_scrollbar/index.html

Tomi
11-22-2009, 06:30 PM
thanks I'll try this!

Arbitrator
11-23-2009, 07:06 AM
Is there anyway I can stop it from pushing my website to the left when the scroll bar appears?html { overflow-y: scroll; } or body { overflow-y: scroll; } would be more direct approaches for ensuring that the vertical scrollbar is ever-present. I'm not sure why Excavator chose such an indirect approach; compatibility with older versions of Opera (which don't support the overflow-y property), perhaps?

Excavator
11-23-2009, 10:23 AM
To be honest, I found that solution a long time ago and never looked for anything else.
overflow-y:scroll; looked good at first but it is invalid.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {overflow-y:scroll}
body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
</style>
</head>
<body>
<div id="container">
<!--end container--></div>
</body>
</html>

returns this error from the validator -
7 html Property overflow-y doesn't exist in CSS level 2.1 but exists in [css3] : scroll

Arbitrator
11-23-2009, 10:50 AM
To be honest, I found that solution a long time ago and never looked for anything else.
overflow-y:scroll; looked good at first but it is invalid.It's a CSS3 property that does validate if you change the validator's "Profile" from "CSS level 2.1" to "CSS level 3".

The validation error can't be that big of a deal though since you don't appear to have a problem using it on your CSS tips Web site: http://nopeople.com/CSS/scrollers/index.html.

Excavator
11-23-2009, 07:27 PM
It's a CSS3 property that does validate if you change the validator's "Profile" from "CSS level 2.1" to "CSS level 3".


It would appear that we have two solutions then.
Both are better than other suggested solutions that google turns up, like
html {
overflow: scroll;
}
and
body { min-height: 800px; }

Would in most cases solve this. For the '800px' fill in the amount just
enough to let your client be pleased with the rendering on his machine. ;-)
and
HTML {
overflow: -moz-scrollbars-vertical;
}


html, body {height:100.1%;} may seem like an indirect approach but I see it making the body longer than the screen same as longer content does.
I'm not sure which solution is more elegant or semantic ... like I said earlier, that's the solution I found years ago and that's the one I've been using ever since.

Apostropartheid
11-23-2009, 11:32 PM
Well, your 100.1% method doesn't work in Chrome...

Usually, I find the best method to "get over it". I fundamentally don't like messing with system defaults.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum