3 replies [Last post]
peculiar
Offline
newbie
Last seen: 14 years 15 weeks ago
Timezone: GMT-7
Joined: 2006-08-22
Posts: 2
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 37 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

peculiar
Offline
newbie
Last seen: 14 years 15 weeks ago
Timezone: GMT-7
Joined: 2006-08-22
Posts: 2
Points: 0

that's it! yeah using a

that's it! yeah using a large monitor was part of the problem.

thanks!