467,104 Members | 1,003 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,104 developers. It's quick & easy.

content shifts when extending below view

For a page that display's a catalogue of items in table format. If
the number of rows extends below the view, in some browsers (safari,
firefox) the page shifts to the left a little bit. It's noticeable
when the user clicks back and forth between two similar pages with a
common header. One page whose rows all fit in the view and another
page with identical markup and a greater number of rows. The user is
always free to use the browser scroll bar to view the hidden rows.
What is the generally preferred way to handle this? Would it be
better to split the page in two so that they both fit within view and
provide the links between the two. This would give a more anchored
look to the content that is common to both.
Feb 24 '08 #1
  • viewed: 1980
Share:
2 Replies
skijor wrote:
For a page that display's a catalogue of items in table format. If
the number of rows extends below the view, in some browsers (safari,
firefox) the page shifts to the left a little bit. It's noticeable
when the user clicks back and forth between two similar pages with a
common header. One page whose rows all fit in the view and another
page with identical markup and a greater number of rows.
Gazing into my crystal ball I would say the cause is that the contents
of the page has been centered and when the contents extends below the
viewport browsers Firefox and Safari display a vertical scrollbar which
when introduced shifts the center of the page to the left thereby
shifting the contents. IE always shows a vertical scrollbar whether on
not it is needed so you see no shift.
The user is
always free to use the browser scroll bar to view the hidden rows.
What is the generally preferred way to handle this? Would it be
better to split the page in two so that they both fit within view and
provide the links between the two. This would give a more anchored
look to the content that is common to both.
Well you are overlooking something very fundamental about the web. How
do you know what will fit in my browser window? You don't and you
cannot. So stop trying. You should break up pages in to digestible
chunks so that you don't have the infamous "Scroll-O-Death" pages. But
there are a couple of things to do.

Don't feel the need to "center" your page then it won't shift when a
scroll bar appears.

Don't make a page with fixed width and pixel placed elements then the
page will morph to fill the available space and shifting won't matter.

Lastly, do nothing. Who cares if the page slightly shifts when you
change pages. Most people are not going to flip back and forth just to
say, "Hey the page moves!"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Feb 24 '08 #2
Gazing into my crystal ball I would say the cause is that the contents
of the page has been centered and when the contents extends below the
viewport
yup
Well you are overlooking something very fundamental about the web. How
do you know what will fit in my browser window? You don't and you
cannot. So stop trying.
ok
Don't make a page with fixed width and pixel placed elements then the
page will morph to fill the available space and shifting won't matter.
i like this
Lastly, do nothing. Who cares if the page slightly shifts when you
change pages. Most people are not going to flip back and forth just to
say, "Hey the page moves!"
i know but it bothers me.

Feb 24 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by R | last post: by
4 posts views Thread by Dave | last post: by
9 posts views Thread by Fat Elvis | last post: by
1 post views Thread by Eniac0@gmail.com | last post: by
15 posts views Thread by Christopher Layne | last post: by
3 posts views Thread by MikeB | last post: by
5 posts views Thread by =?Utf-8?B?Y2hlY2tyYWlzZXJAY29tbXVuaXR5Lm5vc3BhbQ== | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.