Reputation: 92651
I am creating a template for a website.
The example is at Framework Login Page
The main CSS sheet is at: master.css
I am trying to center the main parent div.
I am using
#body {
width: 100%;
background: url('pathtoimage.png');
}
#inner_body{
width: 800px;
margin: auto;
}
<body>
<div id="body">
<div id="inner_body"></div>
</div>
</body>
What could the issue be?
Upvotes: 1
Views: 2706
Reputation: 2708
Here is the explanation why you should use the correct doctype.
This defines which version of HTML or XHTML your document is actually using. It's needed by browsers or other tools to process the document correctly.
Using an incomplete, outdated or no DOCTYPE at all, throws some browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup.
This means that your web pages may not render well in all the major browsers.
Upvotes: 0
Reputation: 33789
This is a (very) old IE bug.
Fortunately, it's been fixed since IE 6, but you do need to have a proper doctype on your page to cause IE to use "standards" rendering mode and respect your margin: auto
style. On a page without a doctype, IE instead uses "quirks" mode, which falls back to old, non-standard behavior.
Quirksmode has a good page on doctypes and standards mode that explains why you want to make sure your pages have a correct doctype, including some nice tables spelling out what each browser will do differently in quirks and standards mode.
Upvotes: 3
Reputation: 4841
Set the CSS for your "body" div to include:
text-align: center;
And remove any text-aligns you may have on the "inner_body" div, it should inherit from body.
Upvotes: 0