CSS Style Sheet
CODE
@charset "utf-8";
/* CSS Document */
body {
background-color:#000000;
margin:0;
padding:0;
text-align:center;
color:#FFCC33;
font-family:Trebuchet MS, Arial, Tahoma, sans-serif;
font-size:9pt;
}
#header {
position: relative;
height:76px;
background: #caced1 url(images/KN.png) no-repeat center top;
background-color:#000000;
padding: 0;
color: #fff;
margin-left:auto;
margin-right:auto;
width:353px;
}
#navbar ul {
margin: 5px;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #AA0C12;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
HTML sheet
CODE
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css"
href="styles.css" />
</head>
<body>
<div id="header"></div>
<div id="navbar">
<ul>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
</ul>
</div>
</body>
</html>
There are little tiny spaces between the links. How do I remove them without float: left; - Because while it does get rid of the spaces, it also moves it from the center of the screen to the left side, which I do not want.
Thanks in advance.
