List menu with no spaces

[snowneil]

Hi having a problem getting a menu's links to line up next to each other with no gap.

Here is my html:

	<div id="menu">
		<ul>
			<li><a href="#">Link One</a></li>
			<li><a href="#">Link Two</a></li>
			<li><a href="#">Link Three</a></li>
			<li><a class="apply_online" href="#">Apply Online</a></li>
		</ul>	
	</div>

Here is my css:

#menu {
	position:relative;
	width: 100%;
	margin: 0px;
	padding: 0px;
	height: 25px;
	/* border: 1px solid #000000; */
	background-color: #376EB1;
}

#menu ul {
	position: absolute;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	right: 0px;
	top: 0px;
	height: 25px;
}

#menu ul li {
	display: inline;
	padding: 0px;
	margin: 0px;
}

#menu ul a, #menu ul a:visited {
	color: #FFFFFF;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	padding: 10px 15px;
	margin: 0px;
	/* background-color: #CCCCCC; */
}

#menu ul a.apply_online, #menu ul a.apply_online:hover {
	background-color: #CD3558;
}

#menu ul a:hover {
	background-color: #0097E8;
}

As you can see i am playing around with the margins and padding at the moment. You can see the gap between the links when you hover over the links.

Any help on this would be great, thanks.

 

[snowneil]

For anyone interested in this one, i have fixed it now and changed the css quite a bit. I missunderstood what was being floated, which made it confusing but now i have finished it.

CSS

#menu {
	position:relative;
	width: 100%;
	height: 25px;
	background-color: #376EB1;
	float: left;
}

#menu ul {
	list-style-type: none;
	float: right; /* positions the unordered list to the right */
	margin: 0; /* Mozilla fix, not required to set in IE */
	padding: 0;
}

#menu ul li {
	float: left; /* required to position the list elements against each other */
	height: 25px;
	margin: 0;
	padding: 0;
}

#menu ul a, #menu ul a:visited {
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 500; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	padding: 3px 15px 8px 15px; /* precise padding to align the text and back colour with the menu bar */
	display: block;
}

#menu ul a.apply_online, #menu ul a.apply_online:hover {
	background-color: #CD3558;
}

#menu ul a:hover {
	background-color: #0097E8;
}