HighDots Forums  

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

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Centering w/ margin-left: auto, margin-right:auto not working as expected in the Cascading Style Sheets forum.

Reply
 
Thread Tools Display Modes
  #1  
Old   
speralta@progressivetrail.org
 
Posts: n/a

Default Centering w/ margin-left: auto, margin-right:auto not working as expected - 07-30-2006 , 12:12 PM






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.




Reply With Quote
  #2  
Old   
Els
 
Posts: n/a

Default Re: Centering w/ margin-left: auto, margin-right:auto not working as expected - 07-30-2006 , 12:37 PM






speralta (AT) progressivetrail (DOT) org wrote:

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

Quote:
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)

Quote:
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/


Reply With Quote
  #3  
Old   
Beauregard T. Shagnasty
 
Posts: n/a

Default Re: Centering w/ margin-left: auto, margin-right:auto not working as expected - 07-30-2006 , 12:38 PM



speralta (AT) progressivetrail (DOT) org wrote:

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


Reply With Quote
  #4  
Old   
speralta@progressivetrail.org
 
Posts: n/a

Default Re: Centering w/ margin-left: auto, margin-right:auto not working as expected - 07-30-2006 , 03:46 PM




Els wrote:
Quote:
speralta (AT) progressivetrail (DOT) 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.



Reply With Quote
  #5  
Old   
speralta@progressivetrail.org
 
Posts: n/a

Default Re: Centering w/ margin-left: auto, margin-right:auto not working as expected - 07-30-2006 , 03:52 PM




Beauregard T. Shagnasty wrote:
Quote:
speralta (AT) progressivetrail (DOT) 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/v...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.



Reply With Quote
  #6  
Old   
Beauregard T. Shagnasty
 
Posts: n/a

Default Re: Centering w/ margin-left: auto, margin-right:auto not working as expected - 07-30-2006 , 04:17 PM



speralta (AT) progressivetrail (DOT) org wrote:

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


Reply With Quote
  #7  
Old   
Rik
 
Posts: n/a

Default Re: Centering w/ margin-left: auto, margin-right:auto not working as expected - 07-30-2006 , 04:43 PM



Beauregard T. Shagnasty wrote:
Quote:
speralta (AT) progressivetrail (DOT) 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




Reply With Quote
  #8  
Old   
speralta@progressivetrail.org
 
Posts: n/a

Default Re: Centering w/ margin-left: auto, margin-right:auto not working as expected - 07-30-2006 , 09:59 PM



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:
Quote:
Beauregard T. Shagnasty wrote:
speralta (AT) progressivetrail (DOT) 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


Reply With Quote
  #9  
Old   
Beauregard T. Shagnasty
 
Posts: n/a

Default Re: Centering w/ margin-left: auto, margin-right:auto not working as expected - 07-30-2006 , 10:35 PM



speralta (AT) progressivetrail (DOT) org wrote:

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


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.