pages shift slightly

[mufc]

My site (http://www.calgarybridge.com/PRACTICE/) is finished and ready to replace http://www.calgarybridge.com but one thing is bothering me.
Everything is inside a div.container and is centered on the page. If I give the container a height of "auto" some of the pages will shift to the right slightly when loaded. I can see this in Netscape, Firefox and Opera. It happens when the centre div changes from having a bit of information to a lot.
I can fix this by specifying a height of 840 pixels but this gives me scroll bars even when they are not needed.
The original site has a fixed height and handles the changes well but I really would like to fix it the proper way. I just do not know how.
Thanks for any replies in advance.

[Ryan Fait]

It's because of the scrollbars appearing on the page It seems obvious when you think about it, but this one stumped me for a while too. You can get around this by forcing the scrollbars to appear at all times with this little bit of code. Bear in mind it may cause adverse effects in some browsers depending on the site, but for the most part, it should do the trick.

Code: Select all

html, body {
    height: 100%;
    margin: 0 0 1px;
}

[mufc]

Thanks for your response. I read something similar on another Forum. The code I used worked in netscape and firefox but not opera.
html {
min-height:100.1%;
}

[Ryan Fait]

Yes, mine is better. It works in IE and Opera, and that code won't.

[mufc]

Thanks Ryan. You were close. It did not work in Opera until I made a slight change in your code
html, body {
height: 100.1%;
margin: 0 0 1px;
}

Thanks again I am very pleased to solve this

[mufc]

html, body {
height: 100.1%;
margin: 0 0 1px;
}
I also changed the height on the div.container to "auto"

This fixed the scroll bar problem in all browsers but gave me another problem
On my a-z photo pages and my Unit Board page (all have photos) , half of my header would disappear and the backgrounds to my menus would go also. There was a white oblong obscuring it.
I had to use a slightly different Style sheet with the height set to 840px and with none of the other extra code above included.
Frustrating.


The code on any of the a-z photo pages is the original css(photo.css) while the layers.css on other pages is the changed one you recommended. The problem was not with just IE. All the browsers were screwing up the pages. here is a link to a page to show you what I mean http://www.calgarybridge.com/PRACTICE/problem.htm
Something is conflicting with the new info . maybe I have been looking at it too long to see the problem

This problem shows up in the other 3 browsers but not IE 6 OR 7

[moojoo]

Safari used to have this issue with the scroll bar shifting it a bit left as it displayed inside the window. A weird and annoying issue indeed. Caused many people a headache or two.