Body not always centering horizontally

[Galceran]

XHTML 1.0 Strict
Validates
3 out of 8 pages do not have the body centered. In the affected pages the body moves 3mm right. This is the css code

#centerbody {
position : relative;
width : 972px;
margin-left : auto;
margin-right : auto;
border-bottom : 10px solid #fffffe;
border-left : 10px solid #fffffe;
border-right : 10px solid #fffffe;
background:#fff;
}

Using a table with 3 columns, table width 972. All pages have 3 columns.
Any ideas?

[penders]

3mm?! The width of the vertical scroll bar?!

[lucy24]

:) Genius At Work

Except that it's probably half the width of the scroll bar. Mine's currently 4mm but in earlier OS it was fatter.

[Galceran]

I wouldn't have believed it. You are spot on Penders. The affected pages do not have sufficient text to bring the scroll bar into play.

Thanks

[penders]

Except that it's probably half the width of the scroll bar.

High res / small monitor?! :)

You could perhaps force a vertical scroll bar to appear on all pages. On the few pages that don't really require it it will appear greyed out....

body { 
overflow-y: scroll; 
}

[Paul_o_b]

RE:

body {
overflow-y: scroll;
}

That will give you two vertical scrollbars in IE6 and 7.:)

Use this instead:

html {
overflow-y: scroll;
}

[Galceran]

Penders solution made no difference.
Paul has the answer using html... which did work.
Thanks for that I am now using it which stops the annoying jump to the right when switching pages.

[Galceran]

That did not validate. It should be in body as:

overflow:scroll;

The validator gave me the clue

[Paul_o_b]

overflow-y is valid css3 and you need to use that option and it will validate. :)

Don't apply overflow:scroll or it will show the default horizontal scrollbar which is very ugly.

[lucy24]

Can you assume that everyone in the target audience has an up-to-the-minute browser? CSS 1 and 2 don't have separate settings for x and y overflow, so statements using "overflow-y" are likely to be ignored.

[Paul_o_b]

What do you man by up to the minute exactly?

overflow-y is supported in IE6 upwards and more or less every other modern browser so you will be hard pushed to find a browser these days where it doesn't work and indeed when you do find one it's not a critical issue at all and can be safely allowed to degrade.

[Paul_o_b]

Sorry about the typo:)

If indeed you do want to support some ancient browser you could always do this anyway:

html{
overflow:scroll;
overflow-y:scroll;
overflow-x:auto;
}

However, I feel it would be better that older browsers did not get the rule at all.

Of course if IE5 and under was your concern as you mentioned css1 then Ie5 doesn't know what the html element is anyway :)

[penders]

I agree with Paul_o_b (thanks for the fix)

overflow-y:scroll

should be applied to the

html

element (not the

body

) in order to work in IE6 and IE7.

However, I'm just a bit curious... "Penders solution made no difference." - applying

overflow-y:scroll

to the

body

should have at least worked in all other browsers?! Which browser were you testing?

[Galceran]

I viewed it in Firefox 6.0.2.
overflow-y:scroll did not give a vertical scroll bar.
However overflow:scroll applied to the Body gives a normal size vertical scroll bar and, it validates (CSS level 2.1). So I am satisfied.
Tks

[lucy24]

Of course if IE5 and under was your concern as you mentioned css1 then Ie5 doesn't know what the html element is anyway

Hm, you could probably have left off the last half-dozen or so words there
::laughing insanely::

The only reason I mention css1 is that mobile validators swear that mobile devices can't use anything fancier. Why this should be so, when mobiles didn't even exist until well after css2 became the norm, may be one of those forever-unanswerable questions. And I know I've never used CSS1, so I'd be seriously stumped if I had to comply with it.

Incredible but true, MSIE 5.2 runs on a modern Intel iMac. I was going to delete it but tried just for the heck of it. There are of course some severe deficits in rendering ...

[Paul_o_b]

I viewed it in Firefox 6.0.2.
overflow-y:scroll did not give a vertical scroll bar.
However overflow:scroll applied to the Body gives a normal size vertical scroll bar and, it validates (CSS level 2.1). So I am satisfied.
Tks

I urge you to reconsider as that will cause severe problems for ie6 and 7 users.

The code offered will work in Firefox 6 and if you have an example of where it doesn't work then I would be extremely interested as I collect all these bugs.

Hm, you could probably have left off the last half-dozen or so words there

Sorry - I was being a little facetious wasn't I but the CSS1 reference threw me a bit :)

[penders]

I viewed it in Firefox 6.0.2.
overflow-y:scroll did not give a vertical scroll bar [when applied to the body]

A side issue but... this should have worked in Firefox 6.0.2.

[Galceran]

I urge you to reconsider as that will cause severe problems for ie6 and 7 users

It shows OK in IE7 but not in IE6. Tested with Adobe Browser Lab.

[penders]

It shows OK in IE7 but not in IE6. Tested with Adobe Browser Lab.

From my experience, Adobe Browser Lab captures the client area only - it never includes the scroll bars on the window itself, even when they are present in the real browser.

I think that if you are seeing a scroll bar in Adobe Browser Lab then that is an additional scroll bar. A scroll bar that is in addition to any that might be on the window (the html element).

Come to think of it... IE6 and IE7 always have a vertical scroll bar present on the browser window (greyed out when not required)!? And this certainly seems to be the case in IE8 under "IE7 Browser Mode" and in IETester (IE6 and IE7). This probably explains why trying to set overflow-y:scroll on the body produces an additional scroll bar in these browsers!

[Paul_o_b]

It shows OK in IE7 but not in IE6. Tested with Adobe Browser Lab.

I don't wish to labour the point but I'm looking at IE7 on xp and vista right now and it shows the double scrollbars when you apply overflow:scroll to the body element. It looks really odd and a usability nightmare.

[Paul_o_b]

Come to think of it... IE6 and IE7 always have a vertical scroll bar present on the browser window (greyed out when not required)!? And this certainly seems to be the case in IE8 under "IE7 Browser Mode" and in IETester (IE6 and IE7). This probably explains why trying to set overflow-y:scroll on the body produces an additional scroll bar in these browsers!

The problem actually seems to be that IE6 and 7 apply overflow-y:scroll by default to the html element thus when you also set scrollbars on the body you end up with two sets of scrollbars.

If you set the html element to overflow:auto then the default faded scrollbar disappears much like other browsers.

The specs basically say that overflow applied to the body element should be propagated to the viewport.

11.1 Overflow and clipping

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.

It seems that IE6 and 7 have misinterpreted the above which is not surprising as its not entirely cut and dry.

[Galceran]

From my experience, Adobe Browser Lab captures the client area only

Sorry ! I had moved on this morning to solving why some of the images were not displaying correctly in IE, after viewing them in Browser lab. I had saved an image of large quote marks and processed it in Photoshop by adding a line above and below together with extra height to seperate them from the surounding text. The image was transparent and did not display as I thought in IE 7, OK in Firefox. Finally gave it a white background to see it displayed correctly in all browsers.

Still thinking about that when I posted my last reply.

[alt131]

Hi Galceran, and welcome to WebmasterWorld :)

Coming to the party late, but

The problem actually seems to be that IE6 and 7 apply overflow-y:scroll by default to the html element

By default overflow-x:auto and overflow-y:scroll. It's gone by ie8+

The specs basically say that overflow applied to the body element should be propagated to the viewport.

Also note that only applies if overflow is set to visible. For ie<8, as overflow was explicitly set to auto/scroll it wouldn't apply.

What intrigued me about this is that overflow:visible is to treated as overflow:auto if the overflow value is propagated to the viewport from the child. Can anyone else recall the early ff habit of clipping overflowing content, but not providing a scroll mechanism, and the "fix' of setting a 1px bottom-border?

The definition of auto is:

The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes

and the recs go on to say

Even if 'overflow' is set to 'visible', content may be clipped to a UA's document window by the native operating environment. {My bold}

- which seems to explain early ff behaviour ... although choosing not to produce a scrolling mechanism because the recs say "should" rather than "must" seems unhelpfully pedantic to the extreme!

[Paul_o_b]

Also note that only applies if overflow is set to visible. For ie<8, as overflow was explicitly set to auto/scroll it wouldn't apply.

Yes I noticed that and its as though the specs expected the default to be visible but did not take into account what happens when that was changed.

That seems to be why some would say this is not a bug as such but rather just a different interpretation of the specs. However should you add overflow:visible to html and overflow:scroll to body you end up with a page that can't be scrolled in IE6/7 so I don't think IE was listening to the specs at all.:)

I remember old Firefox having a lot of rounding errors that caused content to be clipped and I also remember that overflow itself was badly implemented and had many bugs (content cut off, scrollbars showing when they shouldn't and many other strange bugs).

[alt131]

To clarify my first post, the ie defaults I gave are for ie7 and below - gone from ie8 and 9.

Yes Paul, inclined to agree this is an interpretation issue. Although it is/was affected by other issues that were bugs - sometimes I wonder if it is just good luck the recs provide a plausible explanation ....

In terms of the ie 6/7 issue, on closer reading, all those "if's" and "should's" create enough user agent discretion I'm not sure any of them are clearly wrong. Maybe the real meaning of that section of the recommendations is "don't mess with the user interface" ;)

[Paul_o_b]

Maybe the real meaning of that section of the recommendations is "don't mess with the user interface" ;)

lol - that would have been much clearer. We'll have to get you a job to re-write them.