CSS, auto-centering and scrollbars

[Duane Lambe]

Hi - just a quick question, I hope it's simple enough that a visual
example isn't required.

I have an internal site, everything's the way I want it, but there's an
anomoly in both Opera and Firefox, which doesn't exist in IE (surprise).

Essentially, it's a div being margin:auto-d on the page.

#container {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color:#FBFBFB;
width: 700px;
border: 1px solid #B9C8D2;
}

and everything's inside of that div.

Seems that in Opera and Firefox though, if the page is high enough to
invoke the scrolbar, it gets figured into the page width (somehow). When
I'm on the same site, and swap to a page that isn't high enough to get the
scrollbar, it "shifts" to the right, as the scrollbar is no longer there.

IE, if course, "compensates" for this somehow.

I have no idea how to go about attacking this. If this is too general, I'd
really appreciate some general ideas as to where to look, or suggestions
on clarifying this.... or anything to help out. :) The html/css validates
just fine, so I'd hate to start screwing with things that are non-standard.

TIA

[Karl Smith]

"Duane Lambe" <dl****@here.duh> wrote:

I have an internal site, everything's the way I want it, but there's an
anomoly in both Opera and Firefox, which doesn't exist in IE (surprise).
Not really. :-)

Essentially, it's a div being margin:auto-d on the page.

#container {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color:#FBFBFB;
width: 700px;
border: 1px solid #B9C8D2;
}

and everything's inside of that div.
Why?

Seems that in Opera and Firefox though, if the page is high enough to
invoke the scrolbar, it gets figured into the page width (somehow). When
I'm on the same site, and swap to a page that isn't high enough to get the
scrollbar, it "shifts" to the right, as the scrollbar is no longer there.
According to CSS specs the position of a scrollbar on any element is
inside the border, outside the padding. So what you're seeing is to be
expected if the browser maps the border edge of the HTML or BODY
element to the viewport edge.

set {overflow: scroll} somewhere, so the scrollbar will always be
present, if it's really bothering you. I quoteth:

scroll
This value indicates that the content is clipped and that if the user
agent uses a scrolling mechanism that is visible on the screen (such
as a scroll bar or a panner), that mechanism should be displayed for a
box whether or not any of its content is clipped. This avoids any
problem with scrollbars appearing and disappearing in a dynamic
environment.
IE, if course, "compensates" for this somehow.

IE treats that main scrollbar as part of the browser interface, not
part of the rendering of the root element. It isn't wrong, just
different.

--
Karl Smith.

[Neal]

On 17 Feb 2004 14:13:04 -0600, Duane Lambe <dl****@here.duh> wrote:

I have an internal site, everything's the way I want it, but there's an
anomoly in both Opera and Firefox, which doesn't exist in IE (surprise).

Essentially, it's a div being margin:auto-d on the page.

#container {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color:#FBFBFB;
width: 700px;
border: 1px solid #B9C8D2;
}

and everything's inside of that div.

Not sure entirely, but are you certain everyone using this internal site
will have their browser at more than 700px wide? Consider a flexible
design which can squish appealingly down to 500px or smaller and still
look good at 1024px wide.

[Duane Lambe]

On Tue, 17 Feb 2004 22:49:53 -0500, Neal <ne*****@spamrcn.com> wrote:

#container {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color:#FBFBFB;
width: 700px;
border: 1px solid #B9C8D2;
}

and everything's inside of that div.

Not sure entirely, but are you certain everyone using this internal site
will have their browser at more than 700px wide? Consider a flexible
design which can squish appealingly down to 500px or smaller and still
look good at 1024px wide.

Good point, but yep, I'm sure... I'm also the local helpdesk guy and NT
admin, so I know what everyone's running at. There's one person running at
8x6, but it's maximized, so she's good. The site will never be external. :)

[Duane Lambe]

On 17 Feb 2004 19:41:44 -0800, Karl Smith <go************@kjsmith.com>
wrote:

Essentially, it's a div being margin:auto-d on the page.

#container {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color:#FBFBFB;
width: 700px;
border: 1px solid #B9C8D2;
}

and everything's inside of that div.

Why?

I've been using several sites for the design inspiration, including
http://www.alistapart.com/ for the button idea across the top... just
ended up that this was the way I got everything to work, in all browsers.

IE, if course, "compensates" for this somehow.

IE treats that main scrollbar as part of the browser interface, not
part of the rendering of the root element. It isn't wrong, just
different.

Ah, that makes sense. I noticed that http://www.alistapart.com/ does not
follow the behaviour of my site.. our code is different, but the main
design idea is the same (header, buttons, content, sidebar, footer) so
maybe I'll dig through and see what they've done that might keep things in
the center, ignoring the scrollbar.

Thanks for the help folks!

[Lauri Raittila]

In article Duane Lambe wrote:

Not sure entirely, but are you certain everyone using this internal site
will have their browser at more than 700px wide? Consider a flexible
design which can squish appealingly down to 500px or smaller and still
look good at 1024px wide.

Good point, but yep, I'm sure... I'm also the local helpdesk guy and NT
admin, so I know what everyone's running at. There's one person running at
8x6, but it's maximized, so she's good. The site will never be external. :)

And if your company actually hires someone that knows how to use
computer(s) efficiently? Tou need to redesign.

I moved my browser from 800*600 to 1280*1024 and now use smaller window
than previously. (and I was using <600px wide previously...)
(of course, there is some cases when I make it bigger, as there is som
much of clueless webauthors out there. But usually I just fix sites
ignoring (part of) stylesheet or whole page)

Now I can run have my email and irc windows on side of browser.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.