Simple CSS Centering Problem only on IE7, Chrome and FF Fine
Question
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 :)
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.
3 answers
solution1
4 2009-11-20 21:14:20
You're in Quirks Mode . Add a Standards Mode DOCTYPE if you want auto margins (or anything much) to work in IE.
solution2
1 2009-11-20 20:29:43
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;
}
solution3
1 ACCPTED 2009-11-21 10:23:00
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.