...

View Full Version : Centering a container div (IE)



Williebee
08-07-2010, 08:18 PM
Hello

I am creating a web page, but have forgotten how to center a container div, which will work with IE. (I have version 7)

Normally I use Firefox and my page works fine, also OK with Chrome and Opera, but not with IE. All box is to the left.

I've made up a small 'test' file and uploaded it to my own site:

http://www.williebee.co.uk/test.html

What must I had to center in IE ?

I'm not interested in IE5, but does IE6, 7 and 8 need the fix

Many thanks



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Testing center container</title>
<

<style type="text/css">


*{
margin:0px;
padding:0px;
}

body{
background-color:black;
font-family:Helvetica, Arial, sans-serif;
}


#container{
width:960px;
height:400px;
margin:0px auto;
background-color:yellow;
text-align:center;

}

</style>


</head>

<body>


<div id="container">
jUST SOME TEXT AND SOME MORE AND SOME MORE

</div>
<!-- main container div has just ended -->
</body>
</html>

abduraooft
08-07-2010, 09:00 PM
<title>Testing center container</title>
<

<style type="text/css">
Might be due to that extra character.

optimus203
08-08-2010, 01:28 AM
For IE 6 and below in quirks mode does not recognize margin: auto. So you have to trick it by assigning text-align: center; to the body tag.



* {
margin:0px;
padding:0px;
}

body {
background-color: black;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}

#container {
width:960px;
height:400px;
margin:0px auto;
background-color:yellow;
text-align: left;
}

jdswebservice
08-08-2010, 03:47 AM
#box {
margin: 0 auto;
}
body {
text-align: center;
}


This will work. Guaranteed. PM me if you have problems.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum