Log in

View Full Version : 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.



<%@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. ;)



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