...

View Full Version : Right Scrollbar on the Browser



webguy08
08-04-2009, 11:39 PM
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.

_Aerospace_Eng_
08-05-2009, 12:05 AM
Add this to the top of your CSS

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.

webguy08
08-05-2009, 12:31 AM
That didn't fix it :(

_Aerospace_Eng_
08-05-2009, 01:32 AM
I just tried it and it works fine.

<!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.

webguy08
08-05-2009, 06:36 PM
Unfortunately that doesn't work for me :(
Here is the code, hopefully a solution can be found:

CSS:


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:


<!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>

_Aerospace_Eng_
08-05-2009, 11:21 PM
I don't see the CSS I told you to add in your code. Where is it?

webguy08
08-07-2009, 09:43 PM
I tried that code but it didn't work, so I removed it.

webguy08
08-07-2009, 10:08 PM
If it helps in any way to identify the problem, the background images are shifted by 1 pixel.

_Aerospace_Eng_
08-07-2009, 10:31 PM
You are going to have to give us a link to your site since it involves images.

webguy08
08-13-2009, 08:28 PM
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 :o. 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.

VIPStephan
08-13-2009, 09:28 PM
One suggestion: Resize the window slowly in horizontal dimension, look what happens, and tell us what you see.

Apostropartheid
08-13-2009, 09:53 PM
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.

webguy08
08-14-2009, 07:39 PM
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.

webguy08
08-14-2009, 07:40 PM
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 :D. What do you mean by a Latin filler?

VIPStephan
08-14-2009, 07:58 PM
I just want to keep it private whilst it's still in development :D. What do you mean by a Latin filler?

http://lipsum.com/

webguy08
08-15-2009, 12:55 AM
I'm quite confused :confused:. I read that page and the Wikipedia article but I don't understand how I'm supposed to use this to my benefit.

Kristofa
08-15-2009, 01:11 AM
Deleted

VIPStephan
08-15-2009, 11:18 AM
OK, I just noticed you also replied to my other post about the shifting. You know, this shift is happening due to rounding issues. If you resize your viewport the image must stay in the middle somehow but if your image has an even number of pixels in width and is positioned at an odd number of pixels on the page the browser has to decide when to move it and when not because it can only move it if you resize your browser by 2px (as there is no “middle” in one pixel). And your content and the image seem to be slightly different in size or position which is why they are being moved differently and the 1px shift becomes obvious. And this behavior is different from browser to browser.

However, nobody can help you here if you don’t post your code or provide a link because all we could do is guess but we have better things to do all day. You don’t have to show your content, you can replace the text with dummy text which is why I gave you the lorem ipsum link, and if you don’t want your original images to be shown then replace them with some dummy images that still show the issue.

webguy08
08-15-2009, 05:25 PM
I did provide code though :confused:; it's on the 1st page.

What you just stated makes sense, but it doesn't make sense in my case since my images have an even width. For example, if you look at the CSS code you will find in the #top body a background image named logo.png. That image is 800px, as is the div which holds that image, and as is the width of the #main div which holds all the divs in the webpage.

webguy08
08-16-2009, 05:18 PM
Actually it does make sense in my case lol. The introduction of the right scrollbar results in a 1 pixel loss of space on the browser screen, and in turn makes my div's width which holds the background image 800px-1px, thus 799px, which in turn cannot return an integer result when divided by 2, and cannot hold an image of 800px. I can't make the #main div 801px because then there would be a problem when the page does not require a scrollbar. Perhaps there is something I can do with the margins? The left and right margins are both on auto. :confused:

Why on Earth do all the other browsers except IE do this!? It's making me think that maybe IE is the better web browser.

Edit: Holy poo! The latest Firefox (3.5) has addressed this issue! As long as IE and Firefox display it correctly it's fine! Thanks for the help guys!

Ariella Tyler
08-20-2009, 08:06 AM
You may also want to check your mouse properties in Control Panel. Also try the up/down buttons to see if it still occurs. If the arrows work, it could be a mouse issue.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum