 | |
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)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Centering w/ margin-left: auto, margin-right:auto not working as expected -
07-30-2006
, 12:12 PM
#2
| |||
| |||
|
|
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. |
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 |
is)
Quote:
|
Note: This only fails in Internet Explorer. |
In that case:
http://locusmeus.com/html-css/centeringpage.html
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
#3
| |||
| |||
|
|
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. |
<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
#4
| |||
| |||
|
|
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 |
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.
#5
| |||
| |||
|
|
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 |
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.
#6
| |||
| |||
|
|
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. |
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
#7
| |||
| |||
|
|
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. |
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
#8
| |||
| |||
|
|
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 |
#9
| |||
| |||
|
|
Hey, these are great points that the two of you have made. I've definitely been guilty of designing for my screen. Thanks! |
Happy to have helped.
--
-bts
-Warning: I brake for lawn deer
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.