...

View Full Version : not the same in Chrome and IE



Crisium
05-05-2009, 09:36 AM
Hi,

I'm trying to center my div_content in the red box. I have create this simple example to show the problem. Chrome seems to center it like I wants but IE doesn't

anyone know how or why this is happening?
here is the code


<html>
<meta http-equiv='Content-Type' content='text/html;charset=iso-8859-1' />
<title>Test</title>
<head>
<style type="text/css">
.div_outer
{
width: 500px;
border: 1px solid Gray;
margin: auto;
padding: 2px;
padding-bottom: 2px;
}

.div_content
{
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 10px;
width: auto;
border: 0;
margin: 0;
padding: 0;
background-color: lightblue;
}

.div_left
{
width: 100px;
border: 0;
border-right: 1px white solid;
border-bottom: 1px white solid;
margin: 0;
padding: 0;
background-color: darkgray;
float: left;
}

.div_right
{
width: auto;
border: 0;
border-bottom: 1px white solid;
margin: 0;
margin-left: 101px;
padding: 0;
background-color: yellow;
}

.box
{
border: 2px red solid;
width: auto;
}

</style>

</head>
<body>

<!-- red box that surrounds the entire div_outer -->
<div class="box">

<!-- this is what we want to center at some point (not right now) -->
<div class="div_outer" >
<div class='div_content'>

<!-- left side stuff -->
<div class="div_left">
Left Side
</div>

<!-- right side stuff -->
<div class="div_right">
Right Side
</div>
</div>

<div class='div_content'>

<!-- left side stuff -->
<div class="div_left">
Left Side
</div>

<!-- right side stuff -->
<div class="div_right">
Right Side
</div>
</div>

</div>

</div>

</body>
</html>

_Aerospace_Eng_
05-05-2009, 09:51 AM
You need to have a complete doctype for margin:auto; to work in IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.div_outer {
width: 500px;
border: 1px solid Gray;
margin: auto;
padding: 2px;
padding-bottom: 2px;
}
.div_content {
font-family: Verdana, Tahoma, Arial, Sans-Serif;
font-size: 10px;
width: auto;
border: 0;
margin: 0;
padding: 0;
background-color: lightblue;
}
.div_left {
width: 100px;
border: 0;
border-right: 1px white solid;
border-bottom: 1px white solid;
margin: 0;
padding: 0;
background-color: darkgray;
float: left;
}
.div_right {
width: auto;
border: 0;
border-bottom: 1px white solid;
margin: 0;
margin-left: 101px;
padding: 0;
background-color: yellow;
}
.box {
border: 2px red solid;
width: auto;
}
</style>
</head>
<body>
<!-- red box that surrounds the entire div_outer -->
<div class="box">
<!-- this is what we want to center at some point (not right now) -->
<div class="div_outer" >
<div class='div_content'>
<!-- left side stuff -->
<div class="div_left"> Left Side </div>
<!-- right side stuff -->
<div class="div_right"> Right Side </div>
</div>
<div class='div_content'>
<!-- left side stuff -->
<div class="div_left"> Left Side </div>
<!-- right side stuff -->
<div class="div_right"> Right Side </div>
</div>
</div>
</div>
</body>
</html>

Crisium
05-05-2009, 10:13 AM
super.. that did indeed fix the probem.. thanks a million.

peter



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum