473,320 Members | 1,857 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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
8 4216
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
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...
6
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...
6
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...
6
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...
16
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">...
0
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...
2
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...
7
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...
5
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...
7
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 ...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

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.