[allhop]

Hello,

Thanks in advance to all who reply.

I am trying to create a navigation bar inside the DIV #mainNav. I would like the links to be the same height as #mainNav, however, the following problems are occurring:

- In Firefox (see attached file Fig1): Extra space is showing up underneath the links, so when I hover over the link, the color does not extend to the bottom of #mainNav.

- In IE (see attached file Fig2): Extra space is showing up above the links, and the links are extended below the #mainNav. This is causing extra space to occur between #mainNav and the following DIV.

XHTML Code:

Code:

<div id="mainNav">
	<ul>
		<li><a href="laborpro.com" title="Home">Home</a></li>
		<li><a href="laborpro.com/services" title="Services">Services</a></li>
		<li><a href="laborpro.com/ratesfees" title="Rates & Fees">Rates & Fees</a></li>
		<li><a href="laborpro.com/resources" title="Resources">Resources</a>
		<li><a href="laborpro.com/aboutus" title="About Us">About Us</a>
		<li><a href="laborpro.com/contact" title="Contact">Contact</a>
	</ul>
</div>

CSS Code:

Code:

#mainNav {
	width:778px;
	height:40px;
	margin-top: 0;
	margin-right:auto;
	margin-bottom: 0;
	margin-left:auto;
	background:#50729F;
}

#mainNav li {
	margin:0;
	padding:0;
	display: inline;
	list-style-type: none;
}

#mainNav a {
	float:left;
	line-height: 14px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding:10px 30px 10px 30px;
	text-decoration: none;
	background:#50729F;
	color:#FFFFFF;
}

#mainNav a:hover {
	background:#663300;
}

[allhop]

Never mind. I added #mainNav ul {display:inline} and adjusted the line-height and that fixed the problems.