473,797 Members | 3,204 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Centering w/ margin-left: auto, margin-right:auto not working as expected

I'm playing around with a test page that uses a <div id="main"withi n
the context of a body with a width of 100% to center a fixed width
field on a page. For some reason, the page is not centering in
Internet Explorer. What's odd is that it works on my site's home page
and most other pages, but not on pages that I am returning from a
particular script. I've stripped out most of the content in an attempt
to sort it out, but after kicking it around for most of the morning, I
have no idea why it is not working as expected. Any suggestions would
be appreciated

<body>
<div id="main"></div>
</body>

Associated Styles:

#main {
width: 840px;
margin-left: auto;
margin-right: auto;
background: white;
border: 1px solid black;
}

body {
font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
padding: 0;
margin: 0;
width: 100%;
background: #cfcfcf;
background-image: url('/images/bg.gif');
background-position: center;
}

Here's a "live" example:
http://www.oregon-properties.net/cgi....pl?ml=6024995

Note: This only fails in Internet Explorer.

Jul 30 '06 #1
8 4242
Els
sp******@progre ssivetrail.org wrote:
I'm playing around with a test page that uses a <div id="main"withi n
the context of a body with a width of 100% to center a fixed width
field on a page. For some reason, the page is not centering in
Internet Explorer.
Then either you're using a version older than 6, or you use 6 (or 7)
in Quirksmode.
What's odd is that it works on my site's home page
and most other pages, but not on pages that I am returning from a
particular script. I've stripped out most of the content in an attempt
to sort it out, but after kicking it around for most of the morning, I
have no idea why it is not working as expected. Any suggestions would
be appreciated

<body>
<div id="main"></div>
</body>

Associated Styles:

#main {
width: 840px;
margin-left: auto;
margin-right: auto;
background: white;
border: 1px solid black;
}

body {
font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
padding: 0;
margin: 0;
width: 100%;
background: #cfcfcf;
background-image: url('/images/bg.gif');
background-position: center;
}

Here's a "live" example:
http://www.oregon-properties.net/cgi....pl?ml=6024995
Centers perfectly in my IE6. (once I get the window wide enough that
is)
Note: This only fails in Internet Explorer.
IE5 then?
In that case:
http://locusmeus.com/html-css/centeringpage.html

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Jul 30 '06 #2
sp******@progre ssivetrail.org wrote:
I'm playing around with a test page that uses a <div id="main"withi n
the context of a body with a width of 100% to center a fixed width
field on a page. For some reason, the page is not centering in
Internet Explorer. What's odd is that it works on my site's home
page and most other pages, but not on pages that I am returning from
a particular script. I've stripped out most of the content in an
attempt to sort it out, but after kicking it around for most of the
morning, I have no idea why it is not working as expected. Any
suggestions would be appreciated
<snip code>
>
Here's a "live" example:
http://www.oregon-properties.net/cgi....pl?ml=6024995

Note: This only fails in Internet Explorer.
...and elsewhere.

<http://jigsaw.w3.org/css-validator/validator?profi le=css2&warning =2&uri=http%3A% 2F%2Fwww.oregon-properties.net% 2Fcgi-bin%2Fshowprope rty4.pl%3Fml%3D 6024995>

Seek out the countless threads in these groups about hard-coding font
sizes ... and using Verdana.

http://k75s.home.att.net/fontsize.html

--
-bts
-Warning: I brake for lawn deer
Jul 30 '06 #3

Els wrote:
sp******@progre ssivetrail.org wrote:
I'm playing around with a test page that uses a <div id="main"withi n
the context of a body with a width of 100% to center a fixed width
field on a page. For some reason, the page is not centering in
Internet Explorer.

Then either you're using a version older than 6, or you use 6 (or 7)
in Quirksmode.
What's odd is that it works on my site's home page
and most other pages, but not on pages that I am returning from a
particular script. I've stripped out most of the content in an attempt
to sort it out, but after kicking it around for most of the morning, I
have no idea why it is not working as expected. Any suggestions would
be appreciated

<body>
<div id="main"></div>
</body>

Associated Styles:

#main {
width: 840px;
margin-left: auto;
margin-right: auto;
background: white;
border: 1px solid black;
}

body {
font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
padding: 0;
margin: 0;
width: 100%;
background: #cfcfcf;
background-image: url('/images/bg.gif');
background-position: center;
}

Here's a "live" example:
http://www.oregon-properties.net/cgi....pl?ml=6024995

Centers perfectly in my IE6. (once I get the window wide enough that
is)
Note: This only fails in Internet Explorer.

IE5 then?
In that case:
http://locusmeus.com/html-css/centeringpage.html
I "punted" 5 minutes too early. The problem was that I failed to
include a proper doctype definition in the pages that were generated by
scripts. Mozilla handles this gracefully. IE does not, apparently.

Thanks for the extra set of eyeballs.

Jul 30 '06 #4

Beauregard T. Shagnasty wrote:
sp******@progre ssivetrail.org wrote:
I'm playing around with a test page that uses a <div id="main"withi n
the context of a body with a width of 100% to center a fixed width
field on a page. For some reason, the page is not centering in
Internet Explorer. What's odd is that it works on my site's home
page and most other pages, but not on pages that I am returning from
a particular script. I've stripped out most of the content in an
attempt to sort it out, but after kicking it around for most of the
morning, I have no idea why it is not working as expected. Any
suggestions would be appreciated
<snip code>

Here's a "live" example:
http://www.oregon-properties.net/cgi....pl?ml=6024995

Note: This only fails in Internet Explorer.

..and elsewhere.

<http://jigsaw.w3.org/css-validator/validator?profi le=css2&warning =2&uri=http%3A% 2F%2Fwww.oregon-properties.net% 2Fcgi-bin%2Fshowprope rty4.pl%3Fml%3D 6024995>

Seek out the countless threads in these groups about hard-coding font
sizes ... and using Verdana.

http://k75s.home.att.net/fontsize.html

--
-bts
-Warning: I brake for lawn deer
Thanks for the validation tips and for using fonts other than verdana.
I'm not going to jump into the hard-coding font sizes versus using em,
except to say that I've had more complaints with text swelling from
variable-sized fonts than I have with hard-coded ones.

Jul 30 '06 #5
sp******@progre ssivetrail.org wrote:
Thanks for the validation tips and for using fonts other than verdana.
I'm not going to jump into the hard-coding font sizes versus using
em, except to say that I've had more complaints with text swelling
from variable-sized fonts than I have with hard-coded ones.
Complaints? Then you're doing something wrong.

Kinda hard to tell from your sample page. Is this your main site:
http://www.oregon-properties.net/ ?

Let's assume for a minute I am vision-impaired. I visited this site with
IE, set to Largest makes no difference; all I see is tiny unreadable
letters.

So I fire up Firefox, go to the site, press Control-Plus a couple of
times and, wow, now I can read it, but the design falls apart. Pieces of
text are outside their boxes, on top of each other, and generally really
hard to follow. So what shall I do? Aha. Google for another realtor in
the area...

Still want to ignore px versus em sized fonts? Nearly-blind people buy
houses, too.

--
-bts
-Warning: I brake for lawn deer
Jul 30 '06 #6
Rik
Beauregard T. Shagnasty wrote:
sp******@progre ssivetrail.org wrote:
>Thanks for the validation tips and for using fonts other than
verdana. I'm not going to jump into the hard-coding font sizes
versus using em, except to say that I've had more complaints with
text swelling from variable-sized fonts than I have with hard-coded
ones.

Complaints? Then you're doing something wrong.

Kinda hard to tell from your sample page. Is this your main site:
http://www.oregon-properties.net/ ?

Let's assume for a minute I am vision-impaired. I visited this site
with IE, set to Largest makes no difference; all I see is tiny
unreadable letters.

So I fire up Firefox, go to the site, press Control-Plus a couple of
times and, wow, now I can read it, but the design falls apart. Pieces
of text are outside their boxes, on top of each other, and generally
really hard to follow. So what shall I do? Aha. Google for another
realtor in the area...

Still want to ignore px versus em sized fonts? Nearly-blind people
buy houses, too.
Also, people with very, very big screens and lot's of pixels too.
Disregarding the few enthousiast that pour their life savings into such a
screen, they're usually people with serious money to spend. On top of that
people with big desks don't like to be forced to lean forwared to be able to
read, while they're making the desicions about huge purchases.

Then again, the cautious buyers might want to compare products and
alternatives side by side, made easier by the ability to shrink.

Grtz,
--
Rik Wasmus
Jul 30 '06 #7
Hey, these are great points that the two of you have made. I've
definitely been guilty of designing for my screen. Thanks!

- Sal

Rik wrote:
Beauregard T. Shagnasty wrote:
sp******@progre ssivetrail.org wrote:
Thanks for the validation tips and for using fonts other than
verdana. I'm not going to jump into the hard-coding font sizes
versus using em, except to say that I've had more complaints with
text swelling from variable-sized fonts than I have with hard-coded
ones.
Complaints? Then you're doing something wrong.

Kinda hard to tell from your sample page. Is this your main site:
http://www.oregon-properties.net/ ?

Let's assume for a minute I am vision-impaired. I visited this site
with IE, set to Largest makes no difference; all I see is tiny
unreadable letters.

So I fire up Firefox, go to the site, press Control-Plus a couple of
times and, wow, now I can read it, but the design falls apart. Pieces
of text are outside their boxes, on top of each other, and generally
really hard to follow. So what shall I do? Aha. Google for another
realtor in the area...

Still want to ignore px versus em sized fonts? Nearly-blind people
buy houses, too.

Also, people with very, very big screens and lot's of pixels too.
Disregarding the few enthousiast that pour their life savings into such a
screen, they're usually people with serious money to spend. On top of that
people with big desks don't like to be forced to lean forwared to be able to
read, while they're making the desicions about huge purchases.

Then again, the cautious buyers might want to compare products and
alternatives side by side, made easier by the ability to shrink.

Grtz,
--
Rik Wasmus
Jul 31 '06 #8
sp******@progre ssivetrail.org wrote:
Hey, these are great points that the two of you have made. I've
definitely been guilty of designing for my screen. Thanks!
These are points that a lot of designers don't see in the beginning.
Happy to have helped.

--
-bts
-Warning: I brake for lawn deer
Jul 31 '06 #9

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

Similar topics

1
3187
by: Jason Quinn | last post by:
This is an absurdly simple question. Suppose I have a paragraph which contains an image (of an equation) and I'd like the image to be centered in the middle of the paragraph with space above and below. How do I do this within XHTML and/or stylesheets? I've search for the answer but I get deluged with the same question in different contexts. Plus the responses have been so different that I don't know which are hack answers versus the "best"...
6
4797
by: Robert Smith | last post by:
I thought I had seen this done on another site but I can't find it. I want to have a header at the top of the page, centered, no matter the resolution. I got it working with an ugly scroll bar at the bottom. The image is 1600px because that is the maximum resolution I want it to work at. Any suggestions? The site is here: http://members.optusnet.com.au/spikeyrob_websites/usenet_questions/test.html and the css I used is here:
6
3153
by: Abs | last post by:
Hi! I'm trying to center horizontally the thumbnails at the top of the following page: http://project.fotografist.com/photos.php?p_idgal=1 Like the image at the center. I've tried different CSS things on different elements but I can't get it to work as I want. Any
6
2036
by: Axel Siebenwirth | last post by:
Hi, as described at http://www.quirksmode.org/css/centering.html, I try to do to centering with my site. I did exactly as told on that page but it only seems to center horizontally. My site is at http://www.up-2-d8.de/menu.html Can you please take a look and see whether you can find anything I am doing wrong?!
16
1682
by: tshad | last post by:
I am trying to center a button in a datagrid column in asp.net and it doesn't seem to work. I have the following: <asp:TemplateColumn ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center"> <FooterTemplate> <asp:LinkButton CommandName="Insert" Text="<img src='..\images\Add.gif'border='0'>" ID="btnAdd" Runat="server" />
0
1087
by: gerstla | last post by:
hi I am building a simple control to view images with zooming capabilities. i want the image to zoom when it is clicked on and try to center the point clicked .the code I am using know for centering isnt working correctly. AutoScrollPosition = new Point((int)(currentPoint.X * _zoom), (int)(currentPoint.Y * _zoom)); currentPoint is the last place I clicked. thanks
2
1551
by: johnmr | last post by:
I am building an interface where I have a DIV that gets made visible when you roll over a certain area. The div contains some nav elements, which are jscript rollovers themselves. I've got the code working to hide and show the DIV and to do the rollovers. Here is what it looks like so far: http://www.artntech.com/sample/index.html The problem is, I really want the design to be centered, and since I am using absolute positioning for the...
7
1691
by: skase98 | last post by:
I am working on cleaning up the code as per validation but the very first HTML problem it gives me is the <center> tag that aligns my 800px width design in the window. The design is a table-based one because I build my image in PhotoShop and slice it in ImageReady which generates the HTML for it. I tweak as I go to make it work but I honestly do not know any way to ensure that my design displays mid-screen unless I use <center> tags in the...
5
4826
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up doing this demo with tables. The main problems are the vertical centering of the info area, and of the text inside the squares.
7
2257
by: lawpoop | last post by:
On Mar 11, 6:58 pm, Bergamot <berga...@visi.comwrote: Berg, thanks for taking the time to look at this. Here is the URL ( sorry for the delay in response): http://nerdcraft.net/survey.html I have the grid of 1-5 questions and radio button answers layed out in a table. I couldn't find a tutorial for a css grid, so I hacked it for now. Ideally, I would like to have the question layout in css.
0
9685
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9537
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10469
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
10209
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
10023
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
7560
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
6803
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
5582
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3750
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.