How do you align a div horizontally in the center of a page in IE? I know that this is done easily in Mozilla browsers by setting the left and right margins to auto, but is there a simple way that will work for IE as well? I know about setting left to 50%, and then a negative left margin that is half the width of the div you are centering, but I was wondering if there is an easy, simple way to center a div for both IE and Mozilla browsers.ie 6 will do it with auto margins if you are in a strict enough doctype. Other versions you have to apply text-align:center to the parent.I tried changing my DTD to Strict, but I still had no luck....
This is the DTD I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And this is the code I am using for the div (the portion commented out worked for both IE 6 and Mozilla browsers, as it is now only works for Mozilla browsers):
div#msgBox {
border: 2px solid #000000;
height: auto;
min-height: 1em;
width: 600px;
position: relative;
padding: 1em 2em;
/*margin-left: -300px;
left: 50%;*/
margin-right: auto;
margin-left: auto;
}
Do you notice something that I happen to be missing someplace?that should work... how about the full source?Full source is below....
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
div#msgBox {
border: 2px solid #000000;
height: auto;
min-height: 1em;
position: relative;
padding: 1em 2em;
width: 600px;
/*margin-left: -300px;
left: 50%;*/
margin-right: auto;
margin-left: auto;
}
.myClass {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FF0000;
text-decoration: none;
text-align: center;
}
#botRightText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
width: auto;
position: absolute;
bottom: 0;
right: 0;
margin-right: 0.25em;
margin-bottom: 0.25em;
text-decoration: underline;
color: #000000;
}
</style>
</head>
<body>
<div id="msgBox" class="myClass">
Sample text in my message box.
<div id="botRightText">Text</div>
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#text {text-align: center}
#alignment {text-align: left; margin: auto auto; width:60%;}
p {background:red;}
-->
</style>
</head>
<body>
<div id="text"><div id="alignment">
<p>contents</p>
</div></div>
</body>
</html>This:
Originally posted by wood_tah
<?xml version="1.0" encoding="iso-8859-1"?>
throws IE into quirks mode, lose it and IE6 will center it you'll still need the hack Fang showed you if you want IE5/IE5.5 to center.All you need to do is add these body styles in. I always use the xml decleration and if anything I find it helps that IE is in quirks mode, at least that way I don't need hacks to differentiate between IE5 and IE6:<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">/*<![CDATA[*/
body{
text-align:center;
}
div#msgBox {
border: 2px solid #000000;
height: auto;
min-height: 1em;
position: relative;
padding: 1em 2em;
width: 600px;
/*margin-left: -300px;
left: 50%;*/
margin-right: auto;
margin-left: auto;
}
.myClass {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FF0000;
text-decoration: none;
text-align: center;
}
#botRightText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
width: auto;
position: absolute;
bottom: 0;
right: 0;
margin-right: 0.25em;
margin-bottom: 0.25em;
text-decoration: underline;
color: #000000;
}
/*]]>*/</style>
</head>
<body>
<div id="msgBox" class="myClass">
Sample text in my message box.
<div id="botRightText">Text</div>
</div>
</body>
</html>Originally posted by lavalamp
I always use the xml decleration and if anything I find it helps that IE is in quirks mode, at least that way I don't need hacks to differentiate between IE5 and IE6:
Damn good idea, I gotta try that. So throwing IE6 into quirks mode makes it render identically to IE 5? Or pretty close to it? Is it still valid XHTML to do this?They don't always render the same, but at least when IE6 is in quirks mode they have the same crappy box model. Saves any confusion.
This is the DTD I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And this is the code I am using for the div (the portion commented out worked for both IE 6 and Mozilla browsers, as it is now only works for Mozilla browsers):
div#msgBox {
border: 2px solid #000000;
height: auto;
min-height: 1em;
width: 600px;
position: relative;
padding: 1em 2em;
/*margin-left: -300px;
left: 50%;*/
margin-right: auto;
margin-left: auto;
}
Do you notice something that I happen to be missing someplace?that should work... how about the full source?Full source is below....
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
div#msgBox {
border: 2px solid #000000;
height: auto;
min-height: 1em;
position: relative;
padding: 1em 2em;
width: 600px;
/*margin-left: -300px;
left: 50%;*/
margin-right: auto;
margin-left: auto;
}
.myClass {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FF0000;
text-decoration: none;
text-align: center;
}
#botRightText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
width: auto;
position: absolute;
bottom: 0;
right: 0;
margin-right: 0.25em;
margin-bottom: 0.25em;
text-decoration: underline;
color: #000000;
}
</style>
</head>
<body>
<div id="msgBox" class="myClass">
Sample text in my message box.
<div id="botRightText">Text</div>
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#text {text-align: center}
#alignment {text-align: left; margin: auto auto; width:60%;}
p {background:red;}
-->
</style>
</head>
<body>
<div id="text"><div id="alignment">
<p>contents</p>
</div></div>
</body>
</html>This:
Originally posted by wood_tah
<?xml version="1.0" encoding="iso-8859-1"?>
throws IE into quirks mode, lose it and IE6 will center it you'll still need the hack Fang showed you if you want IE5/IE5.5 to center.All you need to do is add these body styles in. I always use the xml decleration and if anything I find it helps that IE is in quirks mode, at least that way I don't need hacks to differentiate between IE5 and IE6:<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">/*<![CDATA[*/
body{
text-align:center;
}
div#msgBox {
border: 2px solid #000000;
height: auto;
min-height: 1em;
position: relative;
padding: 1em 2em;
width: 600px;
/*margin-left: -300px;
left: 50%;*/
margin-right: auto;
margin-left: auto;
}
.myClass {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FF0000;
text-decoration: none;
text-align: center;
}
#botRightText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
width: auto;
position: absolute;
bottom: 0;
right: 0;
margin-right: 0.25em;
margin-bottom: 0.25em;
text-decoration: underline;
color: #000000;
}
/*]]>*/</style>
</head>
<body>
<div id="msgBox" class="myClass">
Sample text in my message box.
<div id="botRightText">Text</div>
</div>
</body>
</html>Originally posted by lavalamp
I always use the xml decleration and if anything I find it helps that IE is in quirks mode, at least that way I don't need hacks to differentiate between IE5 and IE6:
Damn good idea, I gotta try that. So throwing IE6 into quirks mode makes it render identically to IE 5? Or pretty close to it? Is it still valid XHTML to do this?They don't always render the same, but at least when IE6 is in quirks mode they have the same crappy box model. Saves any confusion.