 Centering The Page, Like MSN.com and some other sites |
|
|
|
|
  |
  Apr 18 2007, 01:18 PM
Post
#1
|
|
|
Super Member  Group: [HOSTED] Posts: 583 Joined: 12-July 06 From: Ontario, Canada Member No.: 14,464  |
Many sites have a ~780px layout because it fits well with a 800x600px resolution monitor. The problem is that I want the whole thing centered in the middle of the screen with equal margins at the sides. My CSS is at http://portal.trap17.com/wdl/styles.css and as you would probably guess, my site is at http://portal.trap17.com/wdl/
It is centered in Gecko (Firefox) browsers, but in Internet Explorer it isn't centered. No matter what I use, whether it is a container <div> or centering the <html> and <body> elements, it just doesn't work in Internet Explorer  I use a table for layout (yes, I know it is a bad habit) and I serve my pages text/html to IE and application/xhtml+xml to Firefox and Opera. Maybe that might be the problem? NOTE: This problem was also posted in the W3Schools forum, but no one found a solution yet 
|
 |
 
|
|
Apr 18 2007, 01:36 PM
Post
#2
|
|
|
Premium Member Group: [HOSTED] Posts: 440 Joined: 5-November 06 Member No.: 17,016 |
I use
CODE <center> I just tested. I saved a copy of your index. Then apply the changes, voila This is part of the changes I've done CODE ...... <body> <div id="outer"><center> <table id="page"> ...... </table></center> </div> ...... That's it. Good luck EDIT: I've only tested it on Firefox 2.0 and IE6 (Winxp SP2) This post has been edited by faulty.lee: Apr 18 2007, 01:37 PM |
|
|
|
|
Apr 18 2007, 01:39 PM
Post
#3
|
|
|
Nenad Bozidarevic  Group: [MODERATOR] Posts: 993 Joined: 7-November 05 From: Belgrade, Serbia Member No.: 9,500 |
As far as I can see from your source code, inside the <body> tag you have one DIV, and then one TABLE. The simplest solution would be to remove the DIV container (as it is not necessary this way), and add align="center" to the TABLE tag. This will center the main table in all browsers. However, web developers/designers usually don't like this solution as it is, how I like to call it, "outdated". You can do exactly the same thing with the DIV container, and it's quite simple - you probably just didn't try this combination.
The only thing you need to change is the CSS. In the body properties, include text-align: center (aligns the whole page in Internet Explorer), and in the #outer properties use margin: 0 auto 0 auto and text-align: left. The first one centers the DIV, and the second one is used to nullify the effect text-align: center (from the BODY) would have on the text inside the DIV. @faulty.lee I don't think "center" is a valid XHTML tag  It's even more "outdated" than the align="center" solution I mentioned 
|
|
|
|
|
Apr 18 2007, 02:05 PM
Post
#4
|
|
|
Premium Member Group: [HOSTED] Posts: 440 Joined: 5-November 06 Member No.: 17,016 |
QUOTE(pyost @ Apr 18 2007, 09:39 PM)  I don't think "center" is a valid XHTML tag It's even more "outdated" than the align="center" solution I mentioned Sorry, bout that, didn't notice it was a xhtml. Well, just want to get a quick workaround. Thanks for pointing out |
|
|
|
|
Apr 18 2007, 05:06 PM
Post
#5
|
|
|
Advanced Member  Group: Members Posts: 149 Joined: 14-February 07 From: Tuticorin, India Member No.: 20,415 |
Use the following code to align the enite contents of the page in the center of the page, i.e the contents of <div> tag. This will also reset the alignment of the contents within the <div> tag to left.
CODE body
{ text-align: center; } div#container { margin-left: auto; margin-right: auto; width: 50em; text-align: left; } |
|
|
|
|
Apr 19 2007, 01:11 AM
Post
#6
|
|
|
Super Member Group: [HOSTED] Posts: 713 Joined: 8-April 06 From: Lima - Peru Member No.: 12,579 |
QUOTE(FirefoxRocks @ Apr 18 2007, 08:18 AM) Many sites have a ~780px layout because it fits well with a 800x600px resolution monitor. The problem is that I want the whole thing centered in the middle of the screen with equal margins at the sides. My CSS is at http://portal.trap17.com/wdl/styles.css and as you would probably guess, my site is at http://portal.trap17.com/wdl/ It is centered in Gecko (Firefox) browsers, but in Internet Explorer it isn't centered. No matter what I use, whether it is a container <div> or centering the <html> and <body> elements, it just doesn't work in Internet Explorer I use a table for layout (yes, I know it is a bad habit) and I serve my pages text/html to IE and application/xhtml+xml to Firefox and Opera. Maybe that might be the problem? NOTE: This problem was also posted in the W3Schools forum, but no one found a solution yet Hi, can you try to use the margin property setting to 0 auto, i use the following css code to center a page: CODE html {height:100%;padding:0;margin:0;} body {height:100%;color:#000;font-family:Verdana,Georgia,sans-serif;font-size:100.1%;margin:0;text-align:center;padding:0;} #maincontent {width:780px; text-align:left; margin: 0 auto; } /* other stUff */ Best regards, |
|
|
|
 Jun 9 2007, 04:00 AM
Post
#7
|
|
|
Newbie [ Level 2 ] Group: Members Posts: 21 Joined: 9-June 07 From: USA Member No.: 22,499 |
I have been looking for a solution to this for a while now!
And when I look at what you said, it's like...really basic! Nothing all that advanced! Why I never figured it out, I couldn't tell you.... Thanks a million for letting us know! I'm very happy now!!!
|
|
|
|
|
Similar Topics
| Topics | Topics | |
|---|---|---|
|
|
|
|
Lo-Fi Version | Time is now: 4th July 2008 - 10:22 PM |