CODEWITHSUNDEEP
htmlcss
KJ Saxena
KJ Saxena

Reputation: 21848

Horizontal centering which works in all browsers

Is there a non-javascript way to center the very first container div of a page which would work with IE, FF as well as chrome?

margin:0 auto; does not work in IE8 :(

Upvotes: 1

Views: 111

Answers (5)

srcspider
srcspider

Reputation: 11205

margin: 0 auto; works in all browsers (even as far as IE6).

You are either

  • not specifying a width property so your container is actually centered it's just covering 100% of the width, or
  • have messed up the selector, try a property like color or debug with firebug
  • are triggering quirks mode because you are not specifying a doctype
  • have a lot of errors in your markup; try validating your markup and fixing bad markup — so browsers don't have to guess (and possibly interpret your markup differently)

Upvotes: 1

Daniele
Daniele

Reputation: 122

It works in IE8 but you have to notice IE8 that its a good idea to visualize your webpage with the IE8 standard mode... :S by this tag in the header:

<meta http-equiv="x-ua-compatible" content="IE=8"/>

Upvotes: 0

Bazzz
Bazzz

Reputation: 26922

That should most certainly work in IE8, the reason why it doesn't work for you could be that your IE is in quirks mode, possibly due to a missing DocType. Try this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:50%;margin:auto;border:1px solid black;">TEST</div>
</body>
</html>

Upvotes: 3

Quentin
Quentin

Reputation: 944069

margin:0 auto; works in IE8 if you have a Doctype that triggers standards mode.

If you don't have one, you should. If you really don't want one then you can hack around it.

Upvotes: 1

KJ Saxena
KJ Saxena

Reputation: 21848

I found a not-so-good workaround for this

http://www.bluerobot.com/web/css/center1.html

If someone knows a better solution, please mention it here.

Upvotes: 0

Related Questions