CODEWITHSUNDEEP
htmlcsscentering
Robert
Robert

Reputation: 568

Simple CSS Centering Problem only on IE7, Chrome and FF Fine

I'm having a problem with a centered div only on IE7... on Chrome and Firefox it works properly.

Here is the website, it's on Volusion.com so go easy on me it's an old platform :)

http://www.ecosandbags.com

Everything is in a main div:

<div id="MainDiv">

Here is the CSS

#MainDiv {
background-color:White;
border:1px solid black;
margin:0 auto;
width:960px;
}

Anyways check it out with FireBug in Firefox if you need to see more details but that should be it...

So, bottom line, the div is centered on Chrome and Firefox but all the way to the right on IE7... I'm not sure what to do this CSS (specifically the "margin: 0 auto;" usually works for me)

Thank you very much for your time.

Upvotes: 0

Views: 1797

Answers (3)

Piotr Rochala
Piotr Rochala

Reputation: 7781

You are missing doctype.

Add this as a very first line of your html document and it will solve the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Funny, I was asked to help with exactly same issue in the office yesterday.

Upvotes: 1

bobince
bobince

Reputation: 536587

You're in Quirks Mode. Add a Standards Mode DOCTYPE if you want auto margins (or anything much) to work in IE.

Upvotes: 4

oliverdore
oliverdore

Reputation: 47

I've had this issue before - this has always been a reliable solution for me;

body{
   text-align:center;
}

#MainDiv {
   text-align:left;
   margin:0 auto;
   background-color:White;
   border:1px solid black;
   width:960px;
}

Upvotes: 1

Related Questions