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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post

    Right Scrollbar on the Browser

    Hi all,
    I've been designing a website and now, close to completion, I noticed a problem. If the page becomes long enough to require the right scrollbar on the browser to appear it causes all the background images to shift either to the left (in Google Chrome) or to the right (in Mozilla Firefox), but thankfully it doesn't seem to have an effect in Internet Explorer. Does anyone know a fix for this?

    Thanks for any help.
    Last edited by webguy08; 08-04-2009 at 11:49 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this to the top of your CSS
    Code:
    html {
        overflow-y: scroll;
    }
    I'm not sure how far back in Firefox browsers this will work. I think it may only work in Firefox 2 and up.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    That didn't fix it

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I just tried it and it works fine.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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;
    }
    </style>
    </head>
    <body>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet imperdiet dapibus. Praesent lectus turpis; volutpat sed fermentum ut, dictum eu nulla? Vestibulum nibh sem, condimentum nec euismod vitae, suscipit et lacus! Mauris mattis est vel eros placerat sed varius libero dignissim. In id elit a diam fermentum vestibulum. Ut malesuada dapibus sodales! Sed non libero id quam luctus semper. Nulla vel risus quis metus auctor consectetur vitae id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nulla enim, eget adipiscing sem! Aenean accumsan tempus arcu nec venenatis. Nullam vehicula suscipit dolor, id molestie nisl eleifend sed. </p>
    <p> Nam lacinia turpis ac felis dictum eu egestas mi malesuada. Duis purus leo; dignissim at sollicitudin et, hendrerit et elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacus massa, adipiscing eget placerat sit amet, dictum in purus. Aliquam rutrum tincidunt orci ac euismod. Nulla eleifend, metus accumsan gravida imperdiet; lorem lectus suscipit quam, quis iaculis lorem nibh in purus. Sed id leo lectus, id blandit ante. Suspendisse quis orci ac sem dapibus mattis at ut mi. Nullam sodales feugiat placerat. Integer leo justo, sodales in bibendum in, malesuada quis dolor. Nulla id cursus purus. Ut a lacinia orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce libero justo, tempor sit amet placerat non, accumsan vitae mi. </p>
    <p> Nulla facilisi. Etiam imperdiet tellus quam. Donec nisl eros, hendrerit in posuere eu, posuere et sapien. In vel est lectus, eget posuere dui. Cras sit amet turpis ac lorem tempor luctus eget nec enim. Curabitur euismod ipsum sed purus eleifend adipiscing. Duis aliquet diam vitae ipsum pharetra ultrices. Integer leo dolor, malesuada id scelerisque non, viverra sit amet est. Duis congue felis et tortor placerat quis vestibulum neque rutrum? Nunc quis nisl non leo gravida faucibus. Curabitur euismod metus eget mauris consequat vitae elementum diam ultricies? </p>
    </body>
    </html>
    Its possible you are doing something wrong. You should give us a link to your site or post your code.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    Unfortunately that doesn't work for me
    Here is the code, hopefully a solution can be found:

    CSS:
    Code:
    body { margin: 0px; border: 0px; padding: 0px; background-image: url(background.png); background-repeat: repeat-y; background-position: center; background-color: #E96524; }
    a img { border: none; }
    a:link, a:visited, a:hover, a:active { color: #000; }
    #main { width: 800px; margin: 0px auto 0px auto; padding: 0px; }
    #top { width: 800px; height:200px; margin: 0px; padding: 0px; float: left; background-image: url("logo.png"); background-repeat: no-repeat; }
    #logo { width: 450px; height: 90px; margin: 0px; padding: 0px 0px 0px 25px; float: left; }
    #language { width: 120px; height: 90px; margin: 0px; padding: 0px 0px 0px 205px; float: left; font-family: Arial; text-align: center; font-size: 12px; color: White; }
    #languageTable { margin: 0px auto 0px auto; padding: 0px; border: 0px; }
    #departmentTable { margin: 0px auto 0px auto; padding: 0px; border: 0px; }
    #trolley { width: 140px; height: 110px; margin: 0px; padding: 0px 0px 0px 60px; float: left; }
    #buttons { width: 400px; height: 100px; margin: 0px; padding: 10px 0px 0px 200px; float: left; letter-spacing: 20px; }
    #leftBlock { width: 550px; height: 484px; margin: 0px; padding: 0px 10px 10px 20px; float: left; background-image: url(leftblock.png); background-repeat: no-repeat; background-position: center; }
    #rightBlock { width: 220px; height: 494px; margin: 0px; padding: 0px; float: left; background-image: url(block.png); background-repeat: no-repeat; background-position: left; }
    #block { width: 200px; height: 100px; margin: 0px; padding: 0px; float: left; font-family: Arial; font-size: 12px; color: White; }
    #leftCenter { width: 560px; margin: 0px; padding: 5px 5px 5px 10px; float: left; font-family: Arial; font-size: 12px; }
    #rightCenter { width: 210px; margin: 0px; padding: 5px 10px 5px 5px; float: left; font-family: Arial; font-size: 12px; }
    #topCenter { width: 780px; margin: 0px; padding: 10px 10px 5px 10px; float: left; font-family: Arial; font-size: 18px; }
    #center { width: 370px; margin: 0px; padding: 5px 5px 5px 5px; float: left; font-family: Arial; font-size: 12px; }
    #bottomCenter { width: 780px; margin: 0px; padding: 5px 10px 5px 10px; float: left; font-family: Arial; font-size: 12px; }
    #bottomLink { padding: 0px; clear: left; float: left; font-family: Arial; font-size: 12px; }
    #bottom { width: 800px; height: 150px; border: 0px; padding: 50px 0px 0px 0px; float: left; background-image: url(bottomcurve.png); background-repeat: no-repeat; line-height: 20px; }
    #bottomLeft { width: 294px; margin: 0px; padding: 0px; float: left; font-family: Arial; font-size: 12px; text-align: center; color: #7F7F7F; }
    #copyright { width: 506px; margin: 0px; padding: 0px; float: left; font-family: Arial; font-size: 12px; text-align: left; }
    XHTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <title></title>
        <meta name="description" content="" />
        <link rel="icon" href="../resources/favicon.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="../resources/favicon.ico" type="image/x-icon" />
        <link rel="Stylesheet" href="../resources/Stylesheet.css" type="text/css" />
        <script type="text/javascript" src="../resources/JavaScript.js"></script>
    </head>
    <body>
    <div id="main">
    <div id="top"><div id="logo"><a id="logo" style="padding: 0px; display: block;" href="index.html"></a></div><div id="language"><b>Language:</b>
    <br />
    <table id="languageTable">
    <tr><td><a href="" style="color: White;">French</a></td><td><a href=""><img src="../resources/mouseoverfrenchflag.png" alt="French" /></a></td></tr>
    <tr><td>English</td><td><img src="../resources/ukflag.jpg" alt="English" /></td></tr>
    </table>
    </div><div id="image"><a id="image" style="padding: 0px; display: block;" href="index.html"></a></div><div id="buttons"><a href="index.html"><img id="home" src="../resources/home.png" alt="Home" onmouseover="changeButtonImage(this)" onmouseout="changeButtonImageBack(this)" /></a>
    <a href="news.html"><img id="news" src="../resources/news.png" alt="News" onmouseover="changeButtonImage(this)" onmouseout="changeButtonImageBack(this)" /></a>
    <a href="reviews.html"><img id="reviews" src="../resources/reviews.png" alt="Reviews" onmouseover="changeButtonImage(this)" onmouseout="changeButtonImageBack(this)" /></a>
    <a href="previews.html"><img id="previews" src="../resources/previews.png" alt="Previews" onmouseover="changeButtonImage(this)" onmouseout="changeButtonImageBack(this)" /></a>
    <a href="videos.html"><img id="videos" src="../resources/videos.png" alt="Videos" onmouseover="changeButtonImage(this)" onmouseout="changeButtonImageBack(this)" /></a></div></div>
    <div id="leftBlock">Left block</div><div id="rightBlock"><div id="block" style="padding-top: 92px;">Offer 1</div><div id="block" style="margin: 5px 0px 5px 0px;">Offer 2</div><div id="block">Offer 3</div></div>
    <div id="bottom">
    <div id="bottomLink" style="margin-left: 70px;"><a href="contactus.html">Contact Us</a></div>
    <div id="bottomLink" style="margin-left: 120px;"><a href="careers.html">Careers</a></div>
    <div id="bottomLink" style="margin-left: 170px;"><a href="departments.html">Departments</a></div>
    <div id="bottomLink" style="margin-left: 230px;"><a href="privacypolicy.html">Privacy Policy</a></div>
    <div id="bottomLink" style="margin-left: 300px;"><a href="sitemap.html">Sitemap</a></div>
    <div id="bottomLink" style="margin-left: 370px;"><a href="termsandconditions.html">Terms and Conditions</a></div></div>
    <div id="bottomLeft">Site by</div>
    <div id="copyright">Copyright &copy; 2009</div>
    </div>
    </body>
    </html>

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I don't see the CSS I told you to add in your code. Where is it?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    I tried that code but it didn't work, so I removed it.

  • #8
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    If it helps in any way to identify the problem, the background images are shifted by 1 pixel.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You are going to have to give us a link to your site since it involves images.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    The site isn't up, it's on my computer. I'm not really comfortable with sharing the site to be honest; I'd rather keep the content private . Surely the CSS should be enough to indicate a problem. The background images are just shifted out of the div blocks by 1 pixel, and they fit within the divs perfectly by width.

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,621
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    One suggestion: Resize the window slowly in horizontal dimension, look what happens, and tell us what you see.

  • #12
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    One question: if you'd rather keep it private, why on earth would you put it on the internet? Anyway, just replace the content with Latin filler.

  • #13
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    Quote Originally Posted by VIPStephan View Post
    One suggestion: Resize the window slowly in horizontal dimension, look what happens, and tell us what you see.
    The background images change from being shifted by 1 pixel to being as they should, each time I expand the browser horizontally. So they are 1 pixel shifted, then they are normal, then shifted, then normal, etc.

  • #14
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Apostropartheid View Post
    One question: if you'd rather keep it private, why on earth would you put it on the internet? Anyway, just replace the content with Latin filler.
    I just want to keep it private whilst it's still in development . What do you mean by a Latin filler?

  • #15
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,621
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by webguy08 View Post
    I just want to keep it private whilst it's still in development . What do you mean by a Latin filler?
    http://lipsum.com/


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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