473,839 Members | 1,375 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS, auto-centering and scrollbars

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, "compensate s" 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
Jul 20 '05 #1
5 11209
"Duane Lambe" <dl****@here.du h> 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, "compensate s" 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.
Jul 20 '05 #2
On 17 Feb 2004 14:13:04 -0600, Duane Lambe <dl****@here.du h> 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.
Jul 20 '05 #3
On Tue, 17 Feb 2004 22:49:53 -0500, Neal <ne*****@spamrc n.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. :)
Jul 20 '05 #4
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, "compensate s" 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!
Jul 20 '05 #5
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.

Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2612
by: Manlio Perillo | last post by:
Hi. This post follows "does python have useless destructors". I'm not an expert, so I hope what I will write is meaningfull and clear. Actually in Python there is no possibility to write code that follows C++ RAII pattern. Of course Python objects are not statics like in C++, but in C++ the auto_ptr class is used for enforcing this pattern for dynamical
1
13965
by: Glabbeek | last post by:
I'm changing the layout of my site. Instead of using tables, I will use DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not the correct width. Mozilla and Opera are showing the page the way I want. Does anybody know a solution for this? First of all, the code I am using: CSS ------- body {
5
6133
by: Robert Downes | last post by:
I'm using the following in a page that I'm testing in Mozilla: p.actionLinkBlock {border: 1px #000000 dashed; padding: 0.2cm; width: auto} But the dashed border is extending to the right-edge of the screen. I want it to only extend as far as it needs to to nicely contain the content within (a couple of links). Is width: auto the wrong property to do this? Is Mozilla rendering the style wrong?
20
2886
by: Vijay Kumar R. Zanvar | last post by:
Hello, Unlike register, auto keyword can not be used to declare formal parameter(s). Is there any specific reason for this? Kind regards, Vijay Kumar R. Zanvar
6
5075
by: Alpha | last post by:
I retrieve a table with only 2 columns. One is a auto-generated primary key column and the 2nd is a string. When I add a new row to the dataset to be updated back to the database. What should I do with the 1st column ? (Below I have a "1" in place for now). Also, Does the datase.AcceptChanges(); updates the changes to the database? Which command do I use to update the changes in dataset back to the Access database table? Thanks, Alpha...
5
5055
by: Samuel | last post by:
Hi, I am running into a problem of mixing UICulture = auto and allowing users to select culture using a dropdown list. I am detecting a querystring, "setlang", and when found, setting the CurrentUICulture to what's specified in the querystring. Since I want to allow UICulture auto detecting, I add UICulture = "auto" to page directive on each page.
5
3285
by: maya | last post by:
at work they decided to center divs thus: body {text-align:center} #content {width: 612px; text-align:left; margin: 0 auto 0 auto; } this works fine in IE & FF, EXCEPT in FF it doesn't work if I change 'auto' to 0 for left and right margin values; I have to leave those at 'auto'.. so I would like to know what exactly means 'auto' -- what value it represents exactly (and does it apply for all elements/values you might apply 'auto' to?)
22
3101
by: nospam_news | last post by:
I currently get asked about my usage of "auto". What is it for? The keyword is clearly superflous here. In contrast to the huge majority of C/C++ developers I write definitions very explicitly like that: int main(char argc, char *argv, char *env) { try { auto Exception mainException(1); mainException.setErrNo(42);
2
3083
by: Piotr K | last post by:
Hi, I've encountered a strange problem with Firefox which I don't have any idea how to resolve. To the point: I've <divelement with a style "height: auto" and I want to retrieve this value ("auto") in JavaScript - however instead of getting "auto" value, I get calculated height. In IE and Opera it simply returns "auto". Any ideas how to check in Firefox if element height was set to "auto" ? I'll be grateful for any help.
21
6370
by: JOYCE | last post by:
Look the subject,that's my problem! I hope someone can help me, thanks
0
10908
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10649
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10295
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7829
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7018
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5682
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4487
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4064
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3136
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.