FirefoxRocks 0 Report post Posted April 18, 2007 (edited) 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 (Gone, this was MY site - 404)http://forums.xisto.com/no_longer_exists/ and as you would probably guess, my site is at (Gone, this was MY site - 404)http://forums.xisto.com/no_longer_exists/ 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 Edited November 2, 2008 by FirefoxRocks (see edit history) Share this post Link to post Share on other sites
faulty.lee 0 Report post Posted April 18, 2007 (edited) I use <center> I just tested. I saved a copy of your index. Then apply the changes, voilaThis is part of the changes I've done......<body><div id="outer"><center><table id="page">......</table></center></div>...... That's it. Good luckEDIT: I've only tested it on Firefox 2.0 and IE6 (Winxp SP2) Edited April 18, 2007 by faulty.lee (see edit history) Share this post Link to post Share on other sites
pyost 0 Report post Posted April 18, 2007 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 Share this post Link to post Share on other sites
faulty.lee 0 Report post Posted April 18, 2007 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 Share this post Link to post Share on other sites
delivi 0 Report post Posted April 18, 2007 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. body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;} Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted April 19, 2007 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://forums.xisto.com/no_longer_exists/ and as you would probably guess, my site is at http://forums.xisto.com/no_longer_exists/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: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, Share this post Link to post Share on other sites
korireed 0 Report post Posted June 9, 2007 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!!! Share this post Link to post Share on other sites
FirefoxRocks 0 Report post Posted November 2, 2008 Please note that the site mentioned in the original post have been removed. It was my site so I edited out the links to prevent link rot. Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted November 14, 2008 After some time finally i had the time to review my Internet Explorer and Firefox bookmarks files, and i found these websites related to this topic: Vertical Centering in CSS Article that explains how to center an object with unknown height vertically within an area of a page. Vertical Centering in valid CSS - Example Vertical Centering in CSS - Example Vertical and horizontal centering in valid CSS - Example Max Design CSS Centering Article that shows two methods to center a containing block on a page using CSS based on whether your page layout is liquid or fixed width. CSS Positioning Article that shows an overview of the methods and rules that govern visual rendering in CSS2.I hope that it can be helpful for everybody. Best regards, Share this post Link to post Share on other sites
Atomic0 0 Report post Posted November 17, 2008 It is not really pratical to use tables anymore in web design, since it has been succeeded by a more acceptable Cascading Style Sheets (CSS). I do recommend that you visit the tutorials in Post #9 for more info about centering in CSS. Share this post Link to post Share on other sites
