473,320 Members | 1,612 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Why does table moves when scrollbar shows?

80
Hi all!

I have created a page where the content resides inside a table that are aligned in the middle of the page using CSS

Expand|Select|Wrap|Line Numbers
  1. #bodydiv{
  2.     margin-left: auto;
  3.     margin-right: auto;
  4.     width: 1000px;
  5.     }
But when the content becomes big enough vertically the table expands longer that the screen and the browser enables its scrollbar. (No news there..)

This would be the same horizontally, but this is allmost never used, fairly because of bad user interface/interaction.

And offcourse the entire content moves just about 17 pixels. Is there a way to rearrange the table those 17 pixels to the right, fast enough that the users would'nt notice it? this would somehow require a function that realizes the content have been moved.

Or maybe there are an automatic function somewhere developed specificly for this that the browser response to?
Dec 12 '10 #1

✓ answered by drhowarddrfine

This is a common issue with all web content. The typical 'fix' is to just make sure scrollbars are always present.

8 3573
Do you have a online example?

Thats way we can help quicker.
Dec 13 '10 #2
Both pages has scrollbars for me.
Dec 24 '10 #4
AutumnsDecay
170 100+
I see scrollbars on both, as well.

The scrollbar takes up a certain percentage of the window, and as such it will shift your content over when it's present.

I've never had a problem with users complaining about the content being shifted 17 pixels (or whatever the size is). You should be fine.

Another method would be to remove the scrollbar from your overall layout, and place a scrollbar within the table holding the data, though you'd likely want to place that table inside a div, and give the div a scroll bar by using the 'overflow:scroll;' property.
Dec 24 '10 #5
drhowarddrfine
7,435 Expert 4TB
This is a common issue with all web content. The typical 'fix' is to just make sure scrollbars are always present.
Dec 24 '10 #6
Pheddy
80
I guess you are right. Making a div large enough to fill the horizontal area at all times, thought maybe there would be a default solution stored within the browser.. Have a good christmas eve everybody:)
Dec 24 '10 #7
Pheddy
80
By the way, my default browser is Chrome, but when viewing the site on my Iphone, Safari has a cool feature making the scrollbars viewable only when touching the screen to Scrool. Wouldt be usable in a mouse enviroment, but a cool feature none the less..
Dec 24 '10 #8
drhowarddrfine
7,435 Expert 4TB
You don't need to add a div to do this. Just make the html element taller than the viewport. There are two ways to do that:
Expand|Select|Wrap|Line Numbers
  1. html { min-height:101% }
  2.  
  3. html { min-height:100%; margin-bottom:1px }
  4.  
Dec 25 '10 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: yurps | last post by:
Hello here is my html, if you click the missing image in the first column on the left, the div is shown, when clicked again the div disappears...but the bottom border disappears as well...Is there...
1
by: VAhid Mardani | last post by:
HI ; When I Bind The Datagrid To a Dataview In the Table Style Collection.Mapping Name Not have any table name; please tell me How To Change Datagrid Table Style When It was Binded to A Dataview...
8
by: Klemens | last post by:
The linked table has a bigint in primary key columns. I've read that service pack 8 on Jet should solve this but it didn't. On patch1 options I only found to map timestamp to char(26) entry for...
2
by: Klemens | last post by:
The linked table has a bigint in primary key columns. I've read that service pack 8 on Jet should solve this but it didn't. Are there any other solutions? Thanks Klemens
3
by: PJ6 | last post by:
I have a user control (HTML table) within a table. Would it be possible to cause the user control to scroll its conents when its container is too small, or will I just have to make its height =...
1
by: Mr. T. | last post by:
Hi, on this page: http://www.baekelandfonds.be/index.php the text and picture on the right hand side are shown like they should in FF, i.e. next to the menu. However, if i open the same page...
6
by: Christopher Lusardi | last post by:
How can I fix this? When I do the below I get the error message: "Cannot insert explict value for identity column in table 'Employees' when IDENTITY_INSERT is set to OFF." To get this message,...
3
by: test9991014 | last post by:
I have a clickable image, and I've set up several maps so that users can click on one or another item and have some result occur. I have found that, rather strangely, some map areas move when I...
2
by: deegeorge | last post by:
Hi, I have 500 images.when clicking on one link it need to load this much images.Its loading fine.My requirement is load the image only in the viewable area.when scrolling the scrollbar next ...
2
by: James Stevenson | last post by:
The website I am working on looks fine so long as the browser window is as wide or wider than the width of the background image. But as soon as I re-size the browser window down to the point where it...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.