css not centering

**Yammaski** · 12-11-2011, 01:26 PM

IE9 and FF (8) doens't center the navigation bar, it's more to the right side.
Though IE8 centers it.
How can I center it in all browsers. I can't find out this issue.

HTML Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>balk	</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #CCCCCC;
	text-align: center;
	margin-top: 10px;
}
html {
       overflow-y: scroll;
}
#Outline {
	width: 970px;
	background-color: #C63;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
}
#active a {
	border-left: 1px solid #fff;
}

#navcontainer {
	background-color: #000000;
	width: 970px;
}

#navcontainer ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 0;
	padding-bottom: 5px;
	padding-top: 5px;
	font-size: 16px;
	*font-weight:normal;/* IE=normal, FF=bold */
}

#navcontainer ul li {
	display: inline;
	margin-left: -5px;
	*margin-left: -6px;
}

#navcontainer ul li a {
	padding: 5px 10px 5px 10px;
	color: #E6E6E6;
	text-decoration: none;
	border-right: 1px solid #e6e6e6;
}

#navcontainer ul li a:hover {
	background-color: #FF0000;
	color: #000000
}
-->
</style>
</head>
<body>
<div id="Outline">
  <div id="navcontainer">
  <ul id="navlist">
<li id="active"><a href="../Asp/Stickers.asp">home</a></li>
<li><a href="../Asp/Catalogus.asp">catalogus</a></li>
<li><a href="../Asp/New.asp">new</a></li>
<li><a href="../Asp/Galerij.asp">galerij</a></li>
<li><a href="../Asp/Plakinstructies.asp">plakinstructies</a></li>
<li><a href="../Asp/Contact.asp">contact</a></li>
<li><a href="../Asp/Faq.asp">faq</a></li>
</ul>
  </div>
</div>
</body>
</html>

**Yammaski** · 12-11-2011, 07:14 PM

Finally ... changing this rule will work around it.

Code:

#active a {
	border-left: 1px solid #fff;
	margin-left: -33px;/* IE9 and FF8 */
	*margin-left: 5px;/* IE8=normal */
}

Thread: css not centering

Thread Tools

Search Thread

css not centering

Bookmarks

Bookmarks

Posting Permissions