About center alignment in Ie

Discussion in 'CSS' started by mikee.jk, Feb 27, 2008.

0
  1. #1
    Hi guys

    i am having a problem with center alignment .
    it works fine in mozilla firefox but not in Ie?



    <html>
<link rel="stylesheet" href="style.css">
<body>
<div id="container">

	<div id="layout">
	
		<div id="header">
		mike
		</div>
	
	</div>
	
</div>
</body>
</html>
    Code (markup):

    *{
margin:0;
padding:0;
}

#container{
width:100%;
background-color:#dfd;
height:100%;
}


#layout{
width:800px;
background-color:#fc9;
margin:0px auto;
}

#header{
width:800px;
background-color:#ddd;
height:150px;
}
    Code (markup):

     

    Attached Files:

    mikee.jk, Feb 27, 2008 IP
  2. Dan_A

    Dan_A Peon

    Messages:
    65
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Dan_A, Feb 27, 2008 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm going to second what Dan A said. Use a complete and proper DOCTYPE declaration, and then make sure that the HTML code validates against it.
     
    Dan Schulz, Feb 27, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    ...and consider losing the wasted extra containing DIV that isn't doing anything for you.

    ...AND while adding a doctype fixes IE 6 & 7, it does nothing for 5.x so if you care about that you should be adding text-align:center to the outermost container (which should be BODY)

    ...AND apply those outermost values to #body or switch to min-height instead of height, since your background green won't stretch past screen height if the content does so.

    ...AND 800px is not actually 800px friendly, so I'd either drop it to 768, or make use of the extra space available at 1024 and up it to 992.

    ...AND since that is a header, I'd not be wasting a DIV and a class on it - if it's a header, use a header tag

    ...AND since the header is inside a perfectly good width constraining container, there is NO REASON to be explicitly declaring a width on it.

    <!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" 
	lang="en" 
	xml:lang="en"
><head>

<meta 
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1" 
/>

<link 
	type="text/css" 
	rel="stylesheet" 
	href="screen.css" 
	media="screen,projection" 
/>

<title>
	Template
</title>

</head><body>

<!-- empty spans below are image replacements, do not remove -->

<div id="container">

	<h1>
		mike
	</h1>
	
<!-- #container --></div>

</body></html>
    Code (markup):
    and screen.css
    *	{
	margin:0;
	padding:0;
}

body {
	background:#DFD;
	text-align:center; /* center #container in IE 5.x */
}


#container {
	width:768px;
	margin:0px auto;
	background:#FC9;
	text-align:left; /* reset to normal after IE 5.x centering */
}

h1 {
	height:150px;
	background:#DDD;
}
    Code (markup):
    Which validates strict, and works in IE 5.x, 6 & 7, Opera, Safari and FF.
     
    deathshadow, Feb 28, 2008 IP