Web pages jump horizontally when using a large screen
I am a website developer and have a problem with a couple of pages on a website when a large 26" screen is used, with Firefox covering the entire screen.
See the affected URL http://www.degroenezee.nl/projecten.htm/ (Projects - Agenda 2012) and click on the right arrow under the image on the left side of the web page. The entire (new) page (Agenda 2011) 'jumps' a couple of millimeters to the left. Clicking on the right or left arrow on this page causes the next page to jump back again to the standard (centered) page position. This problem does not occur with any other pages on this website or if the display area of Firefox is reduced to say 15-17" screen dimensions, or if the text in the right hand panel of the affected page is shortened by about 25% (i.e. text is removed from the page). This problem does not occur in any other browser. I am using Firefox version 12.0, but earlier versions exhibit the same problem.
Bewurke troch MacGuiver45 op
Alle antwurden (11)
That is probably caused by the appearance of a vertical scroll bar.
If that scroll bar appears then the available width is 16px less and that causes the left position of the centered table to get changed.
To avoid that you can specify to have the vertical scroll bar visible all the time (body {overflow:scroll;})
Hi there cor-el,
Thanks for your suggestion. I had tried setting the div container to overflow:scroll and overflow:auto in the CSS, but this didn't help - for some reason a scroll bar didn't become visible on the affected page - don't understand why.
I'll try some ideas around your suggestion and let you know if it helped. That might save someone else many hours of puzzling and frustration!
regards, MacGuiver45
Works fine here with this code in the head section:
<style type="text/css">body {overflow-y:scroll}</style>
Did you reload the page?
Reload web page(s) and bypass the cache to refresh possibly outdated or corrupted files.
- Press and hold Shift and left-click the Reload button.
- Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
- Press "Cmd + Shift + R" (MAC)
I always reload and bypass the cache on changed webpages, so that was not the problem.
I have tried your suggestion, but I'm afraid it hasn't helped and the scroll bar does not become visible...???!!! See http://www.degroenezee.nl/projecten_ommegang.htm with revised html.
I have now measured the jump - it's only about 2 mm which is about half the width of a scroll bar. It's really annoying that this problem only exists in Firefox and then only under the conditions I have described. If I reduce the screen area occupied by Firefox to approx. 17" diagonal then the problem goes away! Of course, this means that for 99.9% of visitors to the website they will see the pages as intended - just the 'fortunate few' who use large screens with Firefox covering the entire screen will see this annoying jump. (It offends my professional perfectionism!)
That page (3) already has a scroll bar for me, but page 2 hasn't.
Page 3 is the only one with a scroll bar if the window is maximized.
I do see a scroll bar on page 3 if I zoom out to 80%.
It looks a bit weird that the count goes down if I click the arrow at the right and that you need to click the arrow at the left to go from 2 to 3 and further up.
Hi cor-el,
I've just noticed something interesting:
If I reduce the height of the screen area occupied by Firefox while the 'offending' page is displayed then the page remains perfectly centered. If I do the same with any other page then that page jumps!
So, it looks like all the other pages are not centered while just this one page is. Curiouser and curiouser...
Still doesn't explain why there's no scroll bar though.
The reason for the 'strange' numbering is that the artist keeps adding new projects; number 4 being the latest (current) and 1 being the oldest. This is how she wants it and the customer is always right!
I am not sure if you can still see a scroll bar - I temporarily added a property of overflow:scroll to the body text in the CSS for the entire website. This gives 2 vertical scroll bars separated by about 1/2" in Windows Explorer, but nothing in Firefox.
Oh great - I've just checked all the other browsers and now the page jumps in all of them! This is really driving me nuts....
Cor-el; I've got to leave this for now, but I'll continue to try solutions. Thanks for thinking along with me. I'll post a message as soon as I've got to the bottom of this (positive/wishful thinking!).
Of course, any further suggestions are more than welcome! Cheers...
I'm not seeing any CSS code with an overflow property, so I assume that something went wrong with editing or uploading the modified file(s).
Where did you add the overflow rule?
I see two references to the agnes.css file, one in the head and another further down in the body.
<link href="agnes.css" rel="stylesheet"> <style type="text/css"></style>
<link href="agnes.css" rel="stylesheet" type="text/css">
Correct: I've put everything back to how it was for now - I've got some urgent things to do so I'll have to leave this problem for a while.
There is a second <link href="agnes.css" rel="stylesheet" type="text/css"> in a Library item.
There is something different in the coding between the 'bad' page and all the other pages and I can't see what it is. I'm going to have to print out the codings and lay them side by side. Hopefully I can then find out what the difference is.
I'll post info asap.
Does the jumping still occur if you have the vertical scroll bar visible or hide on all pages by zooming out or in?