some pages shift to the right

help with height auto

[mufc]

My site bleep is finished and ready to replace 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.

[edited by: SuzyUK at 9:41 pm (utc) on Jan. 25, 2007]
[edit reason] No site specifics, thanks. See TOS #13 [WebmasterWorld.com] [/edit]

[SuzyUK]

t happens when the centre div changes from having a bit of information to a lot.

so does that mean there's scrollbar sometimes (I couldn't find it even viewing the link)?

If there's a scrollbar your viewport wil be slightly smaller (about 16px by default though not exactly x-browser) therefore your area for centering will expand/reduce as appropriate, except IE which produces a scrollbar by default no matter the length of the page so the "shift" is not there.

The 'cure' is to make the body/wrapper element 100.01% minimum height to force a scroll in all browsers

If you want my v.humble opinion.. if that is the reason for the 'shift' - no-one will notice as long as the content of your pages are what they're expecting and they're not just at your site to measure pixels!

Suzy

[iseem]

The shift to the right caused by the browser scrollbar appearing and disappearing is normal. The 840px keeps the scroll bar there on YOUR monitor, but that wouldn't be true for someone with a higher res screen who opened their browser window to a height of more than 840px. Still, I think setting the height is a good solution...(edit: SuzyUK got it). Maybe you could drum up a bit more content for those pages?

[mufc]

This little bit of code did the trick in Netscape and Firefox but not Opera

html {
min-height:100.1%;
}

Thanks for your quick response. So simple when you think about it. Funny but I never noticed the scroll bar appearing and disappearing.

[mufc]

Actually someone from another forum got me on the right track.
This code works in Opera also
html, body {
height: 100.1%;
margin: 0 0 1px;
}

Thanks everyone

[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.

[mufc]

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 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 <url removed, see above>

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

[edited by: encyclo at 3:22 pm (utc) on Jan. 26, 2007]