Big "block" links

[knystrom18]

Site: http://www.kylenystrom.com/logI'm trying to have a bar of links that have a clickable region much larger than that of the text itself. I've managed this via padding of the link. The problem is, there is a space in between each link, or li, I don't know which one, which is making the link hover weird. Here are some images to better explain:I want my bar to look like this:I want every link to hover like this:But this happens:How can I get rid of that space between the link's border and the hover effect?CSS:

div#nav {	height: 39px;	text-align: center;	background-color: #820E01;}a:link.navLink,a:visited.navLink {	padding: 12px 20px 12px 20px;	position: relative;	top: 12px;	border-right: solid 1px #C39D5F;	color: #000;	text-decoration: none;	font-weight: bold;}a:link.navLink#thisOne {	border-left: solid 1px #C39D5F;}a:hover.navLink {	background-color: #C39D5F;}ul#navList {	margin: 0;	padding: 0;	list-style: none;}ul#navList li {	display: inline;}

XHTML:

<div id='nav'>		<ul id='navList'>			<li><a href='#' class='navLink' id='thisOne'>Nav Item</a></li>			<li><a href='#' class='navLink'>Nav Item</a></li>			<li><a href='#' class='navLink'>Nav Item</a></li>			<li><a href='#' class='navLink'>Nav Item</a></li>			<li><a href='#' class='navLink'>Nav Item</a></li>			<li><a href='#' class='navLink'>Nav Item</a></li>			<li><a href='#' class='navLink'>Nav Item</a></li>			<li><a href='#' class='navLink'>Nav Item</a></li>			<li><a href='#' class='navLink'>Nav Item</a></li>		</ul></div><!--nav-->

Halp?

[chokk]

Don't use padding - Use:

display:block;

Specify width and height of the element and you're set.

[knystrom18]

Is it seriously THAT simple? I'ma try right quick...edit: Do you mean set display: block, width and height to the links themselves or to another element like the li's? Setting those properties to the links overrides the li's property of display: inline;edit 2: No success thus far by applying that code to both the links and li's... :)Thanks for your help by the way.

[thescientist]

did you try giving the <li> elements no padding or margins?

[chokk]

Is it seriously THAT simple? I'ma try right quick...edit: Do you mean set display: block, width and height to the links themselves or to another element like the li's? Setting those properties to the links overrides the li's property of display: inline;edit 2: No success thus far by applying that code to both the links and li's... :)Thanks for your help by the way.

You need to remove the bullets, margin and padding from the list element:

ul{list-style-type:none;margin:0;padding:0;}

then you will want to style the a elements:

a{display:block;width:60px;}

Then you would set <li> elements to float left:

li{float:left;}

You don't want to use display:inline;

[knystrom18]

That has worked beautifully. Thank you.

[chokk]

glad to help