467,888 Members | 1,586 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,888 developers. It's quick & easy.

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"within
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
  • viewed: 3973
Share:
8 Replies
Els
sp******@progressivetrail.org wrote:
I'm playing around with a test page that uses a <div id="main"within
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******@progressivetrail.org wrote:
I'm playing around with a test page that uses a <div id="main"within
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?profile=css2&warning=2&uri=http%3A%2F%2F www.oregon-properties.net%2Fcgi-bin%2Fshowproperty4.pl%3Fml%3D6024995>

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******@progressivetrail.org wrote:
I'm playing around with a test page that uses a <div id="main"within
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******@progressivetrail.org wrote:
I'm playing around with a test page that uses a <div id="main"within
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?profile=css2&warning=2&uri=http%3A%2F%2F www.oregon-properties.net%2Fcgi-bin%2Fshowproperty4.pl%3Fml%3D6024995>

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******@progressivetrail.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******@progressivetrail.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******@progressivetrail.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******@progressivetrail.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 discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Jason Quinn | last post: by
6 posts views Thread by Robert Smith | last post: by
6 posts views Thread by Abs | last post: by
6 posts views Thread by Axel Siebenwirth | last post: by
16 posts views Thread by tshad | last post: by
reply views Thread by gerstla | last post: by
2 posts views Thread by johnmr | last post: by
7 posts views Thread by skase98 | last post: by
5 posts views Thread by Markus Ernst | last post: by
7 posts views Thread by lawpoop | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.