CSS pages not equal even with the same css-file

views:

answers:

CSS pages not equal even with the same css-file

Hello!

This is the site i am using as a test site: http://test.pafo.net/

My problem is that the pages, even thou they are equal, they change in position. If you click on Seite 2 and then Start and keep clicking on them, you will see that the entire container is moving a little.

The only difference between those pages are that Seite 2 has more example text, nothing else.

Whats causing this? Did i forget an attribute in the stylesheet somewhere?

+5 A:

Seite 2 gets a scrollbar. That alters the page dimensions. Because your content is centered, it appears to move to the left half the width of the vertical scrollbar.

Robusto 2010-08-04 17:27:34

How can i avoid this? Having the space already "allocated".

Patrick 2010-08-04 20:26:11

One way is to try what @KatieK suggests below. The disadvantage is that all pages will have a scrollbar (enabled or not) whether they are needed or not. Another way is to guarantee that there will be enough content on each page to *require* a scrollbar. Pages that are shorter than the viewport are actually in the minority on the Web. Your test cases for the pages other than Seite 2 probably reflect use cases that won't normally occur. Wait till you have real content and maybe you won't have to do anything.

Robusto 2010-08-04 20:54:10

Ok, thank. Will try it with some real contents.

Patrick 2010-08-05 11:16:28

+1 A:

If you add overflow:scroll; to each page's stylesheet, (on the body element, for example) then a scrollbar will always be rendered even when it's not necessary.

KatieK 2010-08-04 17:45:44

ansaurus

tags:

views:

answers:

CSS pages not equal even with the same css-file

related questions