Nav Menu Overflows In Ie

[mboehler3]

Here is a screen shot of what I am seeing in Firefox:Now in IE 8.0, is displays wrong:As you can see the links overflow a little bit. There is a background image behind the text, which should align together.Here is the html code and css below. Your help is greatly appreciated!

<div id="navmenu" class="navmenu960"><ul><li class="rightBoarderFirst"><a href="/product/payroll/">Payroll</a>	<ul>	<li><a href="#">Payroll Features</a>		<ul>		<li><a href="#">1-Click Payroll</a></li>		<li><a href="#">Clergy Payroll</a></li>		<li><a href="#">Compliance</a></li>		<li><a href="#">Time Clock Integration</a></li>		</ul>	</li>	<li><a href="#">Compare Payroll Services</a></li>	<li><a href="#">Payroll Guided Tour</a></li>	<li><a href="#">Free Payroll Quote</a></li>	<li><a href="#">Start Your Enrollment</a></li>	<li><a href="#">Customer Log In</a></li>	</ul></li><li class="rightBoarder"><a href="#">Products & Services</a>	<ul>	<li><a href="#">Payroll</a></li>	<li><a href="#">401(k)</a></li>	<li><a href="#">Health Insurance</a></li>	<li><a href="#">Workers' Compensation</a></li>	<li><a href="#">Pre-Employment Screening</a></li>	</ul></li><li class="rightBoarder"><a href="#">Accountants</a>	<ul>	<li><a href="#">Accountant Log In</a></li>	<li><a href="#">Referral Program</a></li>	<li><a href="#">Reseller Program</a></li>	<li><a href="#">Accountant Guided Tour</a></li>	<li><a href="#">Resource Center</a></li>	<li><a href="#">Enroll in SureChoice</a></li>	</ul></li><li class="rightBoarder"><a href="surechoice-test-sbt-nav.asp">Small Business Tools</a>	<ul>	<li><a href="#">Calculators</a>		<ul>		<li><a href="#">Paycheck Calculator</a></li>		<li><a href="#">Hourly Paycheck Calculator</a></li>		<li><a href="#">Gross-Up Calculator</a></li>		</ul>	</li>	<li><a href="#">Business Videos</a></li>	<li><a href="#">Articles & Tips</a></li>	<li><a href="#">Payroll Tax Resources</a></li>	</ul></li><li class="rightBoarder"><a href="#">About Us</a>	<ul>	<li><a href="#">Meet Our Team</a></li>	<li><a href="#">Company Awards</a></li>	<li><a href="#">Testimonials</a></li>	<li><a href="#">Partners</a></li>	<li><a href="#">Media Releases</a></li>	<li><a href="#">Careers</a></li>	</ul></li><li class="rightBoarder"><a href="#">Scorecard</a></li><li><a href="#">Contact Us</a></li></ul></div>

#navmenu {background-image: url('/images/v1_1/surechoice/bk-nav-bar-960.gif');background-repeat: no-repeat;width: 960px;height: 30px;}.navmenu960 ul{margin: 0;padding: 0;list-style-type: none;  font-size: 14px;font-family: Arial;}.navmenu960 ul li{position: relative;display: inline;float: left;text-align: left;font-size: 14px;color:#ffffff;z-index:5;}.navmenu960 ul li a{display: block;background: #88ac2e;height: 14px;color: white;padding: 8px 24px 8px;font-size: 14px;text-decoration: none;}li.rightBoarder {border-right: 1px solid #fff;}li.rightBoarderFirst {border-right: 1px solid #fff;padding-left: 8px;}* html .navmenu960 ul li a{ /*IE6 hack to get sub menu links to behave correctly*/display: inline-block;height: 14px;}.navmenu960 ul li a:hover{background: #4d4d4d; /*tab link background during hover state*/height: 14px;color: white;}.navmenu960 ul li ul{position: absolute;left: 0;display: block;visibility: hidden;padding-left: 1px;padding-top: 1px;}.navmenu960 ul li ul li{display: list-item;float: none;}.navmenu960 ul li ul li a{font: normal 14px Arial;width: 220px; /*width of sub menus*/padding: 5px;margin: 0;border-top-width: 0;padding-left:25px;}   .navmenu960 ul li ul li a:hover{ /*sub menus hover style*/background: #4d4d4d;color: white;}

[Ingolme]

This line is the problem:

padding: 8px 24px 8px;

When you specify a height (14px) and then specify a padding (8px), the overall height of the element because the sum of the initial height and the padding. So the height of your <a> elements is 14 + 8 + 8, which is 30px.