My website passes both validation for both XHTML and CSS. It looks fine in Firefox, Chrome, Safari, Opera, even IE 6 (alas, not IE 5.5 but who cares?). Why then, would everything be pushed all the way to the left in IE 7? Any suggestions would be much appreciated.
+2
A:
When i make a centered page i do the following;
set width for the "page"-div and fix margins and center the content in the body.
#page {
width: 900px;
margin: 0 auto;
text-align: left;
}
body {
text-align: center;
}
Has always worked fine for me in all browsers...
ullmark
2009-02-15 19:05:24
I don't really understand why you use relative positioning on the page-div...
ullmark
2009-02-15 19:06:03
Using relative positioning on div#page allows child elements to be positioned absolutely relative to the div rather than the window.
Mark Hurd
2009-02-15 19:30:39
This did it... thanks!
Daniel Schaffer
2009-02-15 20:04:39
A:
Put another div around everything in the <body> and set your margin and width styles on that div, rather than the body itself. Set text-align: center; on <body> as well.
<body> <!-- text-align: center -->
<div id="container"> <!-- width 960px, margin 30px auto, text-align: left, position: relative -->
<div id="nav"></div>
<div id="page"></div>
<div id="preload"></div>
</div>
</body>
Mark Hurd
2009-02-15 19:35:19
A:
It's borked because you do positioning on body/html elements which is plain wrong and will never look the same on all the browsers. See: http://www.sitepoint.com/blogs/2009/02/11/styling-the-html-and-body-elements/
Just use wrapper elements - NEVER position the body.
ionelmc
2009-02-15 19:42:40
I'm confused... you say to NOT use styling on the body element, but then you post an article that says exactly the opposite... Besides, I wasn't positioning the body itself.
Daniel Schaffer
2009-02-16 02:06:54