Stylesheets - Centering divs in firefox and scrollbar issue

Author

Centering divs in firefox and scrollbar issue

Spondishy

2005-11-10, 7:00 pm

Hi,

I am using the following in my stylesheet to center divs in firefox.

html>body {
font-size: 13px;
}

div.centerdiv
{
margin-left: auto;
margin-right: auto;
width: 760px;
}

div.outer { text-align: center; margin: 0 0 0 0; padding: 0 0 0 0; }
div.inner { text-align: left; }

After playing around with it I've noticed that firefox moves the whole
page in when it gets a scrollbar, in other words when the page is too
long to show. Is there any way of stopping this?

Thanks.

Els

2005-11-10, 7:00 pm

Spondishy wrote:

> Hi,

Hello,

> I am using the following in my stylesheet to center divs in firefox.
>
> html>body {

Why are you using this hack?

> font-size: 13px;
> }

Bad font-size.
Change it to font-size: 100%;

(yes, I did notice that you are setting this pixel font size only for
browsers that can actually enlarge it, but what's the point?)

> div.centerdiv
> {
> margin-left: auto;
> margin-right: auto;
> width: 760px;
> }

Do you have a good reason for a fixed width? It may cause horizontal
scrollbars for a number of people. It may also give very short
sentences for another number of people.

> div.outer { text-align: center; margin: 0 0 0 0; padding: 0 0 0 0; }
> div.inner { text-align: left; }

You haven't given any html code, is div.centerdiv inside div.inner?

> After playing around with it I've noticed that firefox moves the whole
> page in when it gets a scrollbar, in other words when the page is too
> long to show. Is there any way of stopping this?

If I understand you correctly, you would prefer to have the most right
24 pixels of your page invisible, as in covered by the scrollbar?
I hope that's not what you want.

> Thanks.

You're welcome :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Electric Boys - Groovus Maximus

Spondishy

2005-11-10, 7:00 pm

Hi HTML is

<div class="outer">
<div class="centerDiv">
<div class="inner">
Content
</div>
</div>
</div>

In answer to your questions.

1) If I understand you correctly, you would prefer to have the most
right
24 pixels of your page invisible, as in covered by the scrollbar?
I hope that's not what you want.

Not at all. The behaviour of IE is that the scrollbar is always
visible, but isn't in Firefox and that is why the center div sometimes
shifts to the left. I was just wondering if there was a way around
this.

2) Do you have a good reason for a fixed width?
As usual the client wants a fixed width "table style" in the center of
the page.

Thanks.

Els

2005-11-10, 7:00 pm

Spondishy wrote:

>
> Not at all. The behaviour of IE is that the scrollbar is always
> visible, but isn't in Firefox and that is why the center div sometimes
> shifts to the left. I was just wondering if there was a way around
> this.

Not that I know of, unless you'd just add enough height to the html or
body element to warrant a scrollbar at all times, but that will have
people scrolling down to see what's there.
<joke>You could then add a tiny pixel sentence right at the bottom,
explaining about the reason for the scrollbar.</>

[color=darkred]
> As usual the client wants a fixed width "table style" in the center of the page.

Well, once you've tried your best to convince the client of the
obvious drawbacks for their visitors and the possible smaller income
due to inaccessibility on their website, there's not much you can do
about that ;-P

> Thanks.

You're welcome :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Electric Boys - The change

Arne

2005-11-10, 7:00 pm

Once upon a time *Spondishy* wrote:

> Hi HTML is
>
> <div class="outer">
> <div class="centerDiv">
> <div class="inner">
> Content
> </div>
> </div>
> </div>
>
> In answer to your questions.
>
> 1) If I understand you correctly, you would prefer to have the most
> right
> 24 pixels of your page invisible, as in covered by the scrollbar?
> I hope that's not what you want.
>
> Not at all. The behaviour of IE is that the scrollbar is always
> visible, but isn't in Firefox and that is why the center div sometimes
> shifts to the left. I was just wondering if there was a way around
> this.

The behaviour of IE is wrong. The reason I say so, is that IE seams to
thinks the browser is part of the website the user is on. Therefore
the web authors is allowed to mess with IE, e.g. changing the look of
the scrollbar. So the scrollbar is visible even when it's not needed.

But as I hope even you understand, the scrollbar is part of the
browser and the browser is the users, not the web authors. So other
browsers show the scrollbar if it's needed, and never let the author
change the look of it.

But the centered content is always centered on a webpage, it's just
that the center change if the page is long enough to need the
scrollbar. As the author you can't do anything about it, and should
not since the browser is the users who visit your site, not yours and
not a part of your site. :)

--
/Arne
-- *Joke of the day* ----------------------------------------
Tech Support: What anti-virus program do you use?
Customer: Netscape.
Tech Support: That's not an anti-virus program.
Customer: Oh, sorry...Internet Explorer.
-------------------------------------------------------------

Gérard Talbot

2005-11-11, 7:19 pm

Spondishy a écrit :
> Hi HTML is
>
> <div class="outer">
> <div class="centerDiv">
> <div class="inner">
> Content
> </div>
> </div>
> </div>
>
> In answer to your questions.
>
> 1) If I understand you correctly, you would prefer to have the most
> right
> 24 pixels of your page invisible, as in covered by the scrollbar?
> I hope that's not what you want.
>
> Not at all. The behaviour of IE is that the scrollbar is always
> visible,

html {overflow: auto;}

MSIE default overflow declaration is scroll, not auto. You may even try
overflow: visible.

> but isn't in Firefox

Firefox's is visible, not scroll.

and that is why the center div sometimes
> shifts to the left. I was just wondering if there was a way around
> this.
>
> 2) Do you have a good reason for a fixed width?
> As usual the client wants a fixed width "table style" in the center of
> the page.

Well, maybe you can explain to him that a rigid page layout is not
scalable, is less accessible for web-aware devices and applications with
reduced viewport dimensions. A rigid, fixed layout webpage is less
accessible for many web users.
One advantage of the web and the screen media is the scalability of
rendering of the content (text size can be increased, padding and margin
are settable, blocks of text can wrap around, etc.) while the page media
is much less flexible.

Gérard
--
remove blah to email me