Stylesheets - CSS, auto-centering and scrollbars

Author

CSS, auto-centering and scrollbars

Duane Lambe

2004-02-17, 4:26 pm

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

2004-02-17, 11:45 pm

"DuaneLambe"<dlambe@here.duh>wrote:

>Ihaveaninternalsite,everything'sthewayIwantit,butthere'san
>anomolyinbothOperaandFirefox,whichdoesn'texistinIE(surprise).

Notreally.:-)

>Essentially,it'sadivbeingmargin:auto-donthepage.
>
>#container{
> padding:0;
> margin-left:auto;
> margin-right:auto;
> margin-top:10px;
> background-color:#FBFBFB;
> width:700px;
> border:1pxsolid#B9C8D2;
>}
>
>andeverything'sinsideofthatdiv.

Why?

>SeemsthatinOperaandFirefoxthough,ifthepageishighenoughto
>invokethescrolbar,itgetsfiguredintothepagewidth(somehow).When
>I'monthesamesite,andswaptoapagethatisn'thighenoughtogetthe
>scrollbar,it"shifts"totheright,asthescrollbarisnolongerthere.

AccordingtoCSSspecsthepositionofascrollbaronanyelementis
insidetheborder,outsidethepadding.Sowhatyou'reseeingistobe
expectedifthebrowsermapstheborderedgeoftheHTMLorBODY
elementtotheviewportedge.

set{overflow:scroll}somewhere,sothescrollbarwillalwaysbe
present,ifit'sreallybotheringyou.Iquoteth:

scroll
Thisvalueindicatesthatthecontentisclippedandthatiftheuser
agentusesascrollingmechanismthatisvisibleonthescreen(such
asascrollbarorapanner),thatmechanismshouldbedisplayedfora
boxwhetherornotanyofitscontentisclipped.Thisavoidsany
problemwithscrollbarsappearinganddisappearinginadynamic
environment.

>IE,ifcourse,"compensates"forthissomehow.

IEtreatsthatmainscrollbaraspartofthebrowserinterface,not
partoftherenderingoftherootelement.Itisn'twrong,just
different.

--
KarlSmith.

Neal

2004-02-17, 11:45 pm

On17Feb200414:13:04-0600,DuaneLambe<dlambe@here.duh>wrote:

>Ihaveaninternalsite,everything'sthewayIwantit,butthere'san
>anomolyinbothOperaandFirefox,whichdoesn'texistinIE(surprise).
>
>Essentially,it'sadivbeingmargin:auto-donthepage.
>
>#container{
> padding:0;
> margin-left:auto;
> margin-right:auto;
> margin-top:10px;
> background-color:#FBFBFB;
> width:700px;
> border:1pxsolid#B9C8D2;
>}
>
>andeverything'sinsideofthatdiv.

Notsureentirely,butareyoucertaineveryoneusingthisinternalsite
willhavetheirbrowseratmorethan700pxwide?Consideraflexible
designwhichcansquishappealinglydownto500pxorsmallerandstill
lookgoodat1024pxwide.

Duane Lambe

2004-02-18, 11:30 am

On Tue, 17 Feb 2004 22:49:53 -0500, Neal <neal413@spamrcn.com> 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. :)

Duane Lambe

2004-02-18, 11:30 am

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

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

2004-02-19, 1:30 pm

In article Duane Lambe wrote:

>
> 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.