Tue, 2006-08-22 03:53
IE is the only browser that views the pages with the same width. Everything else (Safari and Mac Opera) displays the pages with what looks like a 10px difference. The page shifts visibly. This only happens after a certain amount of text is added. Don't know why. I know there must be some hack to solve this. I have tried 3 different generators and layouts, but the same thing happens. Here are the sample pages.
http://www.athleteiam.com/test1.html
http://www.athleteiam.com/test2.html
you can see the difference going from test2 to test1 using the nutrition and athletes links. the css is on each page.
Tue, 2006-08-22 05:24
#1
I can only view in a small
I can only view in a small monitor right now, so am guessing. Does this shift occur when one page has a vertical scrollbar and the other doesn't? IE draws a dummy scrollbar on non-scrolling pages, and the others don't. You can force a scrollbar on every page by adding html {padding-bottom: 1px;}.
cheers,
gary
Tue, 2006-08-22 09:11
#2
Gary's guess is spot on,
Gary's guess is spot on, it's a problem encountered with browsers that seem to think it was a clever idea if the vert scroll bar were to only appear and absorb real estate when required so it pops in and out as page height increases decreases and pushes your layout to the left in rude fashion as it grabs viewport width for itself.
It's one of those rare moments when it's possible? to utter "MS IE got this one right" as they just grey out the bar while letting it
keep the space required.
You can force the issue and have the scroll bar always on by overstating body height or adding very small padding value to the bottom anything that will cause body to be greater than 100%.
Be careful viewing and working layouts on nice large high res screens, with this effect it was only apparent when I extended my browser height to around 760px on my 19" 1280 screen.
Hugo.
Tue, 2006-08-22 13:31
#3
that's it! yeah using a
that's it! yeah using a large monitor was part of the problem.
thanks!