Hailwood
Hailwood

Reputation: 92651

Cannot horizontally center fixed width div in IE

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

Answers (3)

mr.b
mr.b

Reputation: 2708

Here is the explanation why you should use the correct doctype.

  1. Use the correct DOCTYPE ( Document Type Definition, or DTD)

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

John Flatness
John Flatness

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

nybbler
nybbler

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

Related Questions