Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    not the same in Chrome and IE

    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

    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>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to have a complete doctype for margin:auto; to work in IE.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Crisium (05-05-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    super.. that did indeed fix the probem.. thanks a million.

    peter


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •