Advanced Search

Results 1 to 2 of 2

Thread: css not centering

  1. #1
    Join Date
    Feb 2010
    Posts
    63
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default css not centering

    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>

  2. #2
    Join Date
    Feb 2010
    Posts
    63
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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 */
    }

Bookmarks

Posting Permissions

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