ansaurus

Question

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

Answer 1

A:

Try:

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

Nick 2009-11-20 19:57:45

Adding position relative will not help.

David Dorward 2009-11-21 10:33:39

Answer 2

+1 A:

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;
}

na_user 2009-11-20 20:29:43

This is a relatively ugly hack, and there is no need for it unless you need to support IE5.5 and earlier. See answers about Quirks mode.

David Dorward 2009-11-21 10:31:36

Answer 3

+4 A:

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

bobince 2009-11-20 21:14:20

bobince has hit the nail on the head here.

Jason Leveille 2009-11-20 21:27:15

Bobince,Thank you for your reply, that definitely fixed the problem! :) I used the code sample from Rochal below to fix.

Robert 2009-11-22 22:17:37

Answer 4

+1 A:

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"&gt;

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

rochal 2009-11-21 10:23:00

Better to use HTML (XHTML + HTML Compatibility is more work, and few people benefit from it) and Strict (since Transitional is pretty much Strict + Bad Practices).

David Dorward 2009-11-21 10:33:04

Thank you for your reply, that fixed it!

Robert 2009-11-22 22:18:09

ansaurus

tags:

views:

answers:

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

related questions