homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Body not always centering horizontally
Galceran




msg:4367055
 6:12 pm on Sep 25, 2011 (gmt 0)

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




msg:4367085
 7:33 pm on Sep 25, 2011 (gmt 0)

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

lucy24




msg:4367107
 9:08 pm on Sep 25, 2011 (gmt 0)

:) 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




msg:4367113
 9:25 pm on Sep 25, 2011 (gmt 0)

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




msg:4367255
 8:00 am on Sep 26, 2011 (gmt 0)

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




msg:4367317
 12:49 pm on Sep 26, 2011 (gmt 0)

RE:

body {
overflow-y: scroll;
}

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

Use this instead:

html {
overflow-y: scroll;
}

Galceran




msg:4367326
 1:42 pm on Sep 26, 2011 (gmt 0)

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




msg:4367328
 2:16 pm on Sep 26, 2011 (gmt 0)

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

overflow:scroll;

The validator gave me the clue

Paul_o_b




msg:4367345
 2:53 pm on Sep 26, 2011 (gmt 0)

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




msg:4367410
 4:28 pm on Sep 26, 2011 (gmt 0)

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




msg:4367450
 5:29 pm on Sep 26, 2011 (gmt 0)

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




msg:4367498
 9:11 pm on Sep 26, 2011 (gmt 0)

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




msg:4367499
 9:16 pm on Sep 26, 2011 (gmt 0)

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




msg:4367513
 10:17 pm on Sep 26, 2011 (gmt 0)

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




msg:4367540
 11:56 pm on Sep 26, 2011 (gmt 0)

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




msg:4367736
 11:46 am on Sep 27, 2011 (gmt 0)


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




msg:4367810
 3:07 pm on Sep 27, 2011 (gmt 0)

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




msg:4367896
 5:28 pm on Sep 27, 2011 (gmt 0)


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




msg:4367978
 7:39 pm on Sep 27, 2011 (gmt 0)

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




msg:4367981
 7:43 pm on Sep 27, 2011 (gmt 0)


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




msg:4367991
 8:10 pm on Sep 27, 2011 (gmt 0)


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




msg:4367994
 8:40 pm on Sep 27, 2011 (gmt 0)


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




msg:4368166
 10:07 am on Sep 28, 2011 (gmt 0)

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




msg:4368195
 11:08 am on Sep 28, 2011 (gmt 0)


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




msg:4368441
 7:01 pm on Sep 28, 2011 (gmt 0)

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




msg:4368457
 7:23 pm on Sep 28, 2011 (gmt 0)


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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved