Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Scrollbar

  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    38
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Scrollbar

    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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Tomi (11-22-2009)

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    38
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks I'll try this!

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Tomi View Post
    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?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.

    Code:
    <!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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Excavator View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Arbitrator View Post
    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
    Code:
    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
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •