My Nav Menu Really, Really Breaks In Ie6

[mboehler3]

Hi, I have a nav menu which looks like this on IE7, IE8 and Firefox 3.5:The nav menu is a simple unordered list, styled with CSS.However, in IE6 the nav menu looks very distorted. The first list item is on its own line, and the rest of the list items break onto a new line. See below:When I rollover a list item, the rollover state extends like 800 pixels, like this:Only two of the list items have a drop-down list as well, the first ("Payroll") and last ("About Us") items. Here's what I see when I rollover Payroll:Here is the XHTML:

<div class="topnav_bckground"><div class="container_12"><div class="grid_12"><div align="center"><div id="navmenu" class="navmenu960"><ul id="menunav"><li><a href="/product/payroll/" title="Payroll" class="payroll" ><strong>Payroll</strong></a>	<ul>	<li class="top"><div class="navpaddingtop"><a href="/product/payroll/" title="Online" >Online Payroll Advantage</a></div></li>	<li><a href="#" class="bckgroundarrow" title="Payroll Features" ><div class="navpadding">Payroll Features</div></a>		<ul>		<li class="top"><div class="flyoutpaddingtop"><a href="#" title="Accounting Integration" >Accounting Integration</a></div></li>		<li><a href="/product/payroll/1-clickpayroll.asp" class="bckground" title="Technology" ><div class="flyoutpadding">Technology</div></a></li>		<li><a href="/product/payroll/mobile-applications.asp" class="bckground" title="iPhone/Mobile Apps" ><div class="flyoutpadding">iPhone/Mobile Apps</div></a></li>		<li class="bottom"><div class="flyoutpaddingbottom"><a href="/product/payroll/what-you-get.asp" title="All Our Features" >View All Our Features</a></div></li>		</ul>	</li>	<li><a href="/product/payroll/cost-of-payroll.asp" class="bckground" title="Payroll Pricing" ><div class="navpadding">Payroll Pricing</div></a></li>	<li><a href="/product/payroll/payroll-services.asp" class="bckground" title="Payroll Services" ><div class="navpadding">Compare Payroll Services</div></a></li>	<li><a href="/guidedtour/" class="bckground" title="Guided Tour" ><div class="navpadding">Guided Tour</div></a></li>	<li class="bottom"><div class="navpaddingbottom"><a href="/enroll/" title="New Payroll Enrollment" >New Payroll Enrollment</a></div></li>	</ul></li><li><a href="/product/" title="Products & Services" ><strong>Products & Services</strong></a></li><li><a href="/accountant_access.asp" title="Accountant Center" ><strong>Accountant Center</strong></a></li><li><a href="/spsite/resources/" title="Small Business Resources" ><strong>Small Business Resources</strong></a></li><li><a href="/scorecard/" title="Scorecard" ><strong>Scorecard</strong></a></li><li class="aboutus"><a href="/spsite/company/"  title="About Us" class="aboutus"><strong>About Us</strong></a>	<ul>	<li class="top"><div class="navpaddingtop"><a href="/spsite/company/meet-the-team.asp" title="Meet Our Team">Meet Our Team</a></div></li>	<li><a href="/spsite/press/" title="Media Center" class="bckground"><div class="navpadding">Media Center</div></a></li>	<li><a href="/businesspartners/"  title="Strategic Partners" class="bckground"><div class="navpadding">Strategic Partners</div></a></li>	<li><a href="/SecurityCenter/BcrhWare/"  title="Security and Privacy" class="bckground"><div class="navpadding">Security and Privacy</div></a></li>	<li class="bottom"><div class="navpaddingbottom"><a href="/contactus/" title="Contact Us" >Contact Us</a></div></li>	</ul></li></ul></div></div></div></div></div>

And here is the CSS:

.topnav_bckground {background-color: #88ac2e; height:28px; width:100%;}.container_12 {margin-left:auto;margin-right:auto;width:960px;}.grid_12 {display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_12 {width:940px}.center {text-align:center;}#navmenu {margin-right:-30px; margin-left:-30px; background-color: #88ac2e; height: 28px;}.navmenu960 ul {margin: 0; padding: 0; list-style-type: none;  font-size: 14px; font-family: Arial;}.navmenu960 ul li {display: inline; float: left; text-align: left; font-size: 14px; color:#ffffff;}.navmenu960 ul li.aboutus {padding-left:5px; margin-right:-40px;}.navmenu960 ul li a {display: block; color: white; padding: 2px 20px 0px; font-size: 15px; text-decoration: none;}.navmenu960 ul li a.payroll {display: block; background: #88ac2e; color: white; padding: 2px 15px 0px 25px; font-size: 15px; text-decoration: none;}.navmenu960 ul li a.aboutus {display: block; background: #88ac2e; color: white; padding: 2px 18px 0px 18px; font-size: 15px; text-decoration: none;}ul#menunav li {position:relative; z-index:100;}.topnav_bckground {background-color: #88ac2e; height:28px; width:100%;}/*IE6 hack to get sub menu links to behave correctly*/* html .navmenu960 ul li a {display: inline-block;}/*tab link background during hover state*/.navmenu960 ul li a:hover {background: #ffffff; height: 24px; color: #88ac2e; display: block; border: solid 1px #ccc; margin-right:-2px;}.navmenu960 ul li ul {position: absolute; left: 0; display: block; visibility: hidden; padding-left: 0px; padding-top: 2px;}.navmenu960 ul li ul li {display: list-item; float: none;}/*width of sub menus*/.navmenu960 ul li ul li a {font: normal 13px Arial; font-weight:bold; width: auto; margin: 0; display:block;}   .navmenu960 ul li ul li ul {position: absolute; left: 0; display: block; visibility: hidden; padding-left:0px; padding-top: 0px;}/*width of sub menus*/.navmenu960 ul li ul li a.payroll {font: bold 13px Arial; width: 220px; padding: 5px; margin: 0; border-top-width: 0; padding-left:25px; background-image:url('/images/960/global/header-carrot-right.gif'); background-repeat:no-repeat; background-position:right;}   /*sub menus hover style*/.navmenu960 ul li ul li a:hover {color: #88ac2e; height: auto; border: solid 0px #ccc;}/*sub menus hover style*/.navmenu960 ul li ul li ul li a:hover {color: #88ac2e; height:auto; border: solid 0px #ccc;}/* Top Level */.navmenu960 ul li ul li.top {background-image: url('/images/960/navigation/main-top1.gif'); background-repeat:no-repeat; height:45px; font-size:13px; font-weight:bold; display:block; width:251px; margin: 0 1px;}.navmenu960 ul li ul li.top a {display: block; margin: 0 1px; width: auto;}.navmenu960 ul li ul li.top:hover{background-position: 0 -45px; width:251px; color:#88ac2e; display:block; height:45px;}.navmenu960 ul li ul li.top:hover a{color:#88ac2e;}.navpaddingtop {padding-top:17px;}/* Middle Level */.navmenu960 ul li ul li a.bckground {background-image: url('/images/960/navigation/subnav-bckground.gif'); background-repeat:no-repeat; height:25px; width:auto; display: block; margin: 0 1px; }.navmenu960 ul li ul li a.bckground:hover{background-position: 0 -30px; height:25px; color:#88ac2e; width:auto;}.navmenu960 ul li ul li a.bckgroundarrow {background-image: url('/images/960/navigation/subnav-bckgroundarrow.gif'); background-repeat:no-repeat; height:25px; width:auto; display: block; margin: 0 1px;}.navmenu960 ul li ul li a.bckgroundarrow:hover{background-position: 0 -30px; height:25px; color:#88ac2e; width:auto;}.navpadding {padding-top:3px;}/* Bottom Level */.navmenu960 ul li ul li.bottom {background: url('/images/960/navigation/main-bot1.gif') no-repeat 0 0; font-weight:bold; font-family:Arial; font-size:13px; height:34px; display:block; width:251px; margin-left:1px;}.navmenu960 ul li ul li.bottom a {display: block; margin: 0 1px; width: auto;}.navmenu960 ul li ul li.bottom:hover{background-position: 0 -34px; color: #88ac2e; width:251px;}.navmenu960 ul li ul li.bottom:hover a{color:#88ac2e;}.navpaddingbottom {padding-top:5px;}/* Second Level Top */.navmenu960 ul li ul li ul li.top {background-image: url('/images/960/navigation/sub-top1.gif'); background-repeat:no-repeat; height: 33px; display:block; width:265px; margin: 0 1px; margin-left:-1px;}.navmenu960 ul li ul li ul li.top a {display: block; width: auto; margin: 0 7px;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; display:block; height:33px; color: #88ac2e; width:265px;}.flyoutpaddingtop {padding-top:5px;}/* Second Level Middle */.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/960/navigation/subsubback.gif'); background-repeat:no-repeat; height:25px; width:225px; margin-left:-1px;}.navmenu960 ul li ul li ul li a.bckground:hover{background-position: 0 -30px; color:#88ac2e; width:225px;}.flyoutpadding {padding-left:7px; padding-top:3px;}/* Second Level Bottom */.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/960/navigation/subbotback.gif'); height:32px; display:block; width:265px; margin-left:-1px;}.navmenu960 ul li ul li ul li.bottom:hover{background-position: 0 -32px; color: #88ac2e; width:265px;}.navmenu960 ul li ul li ul li.bottom a {display: block; margin: 0 7px; width: auto;}

Any help that you can offer is greatly appreciated, thank you for your help.

[mboehler3]

Ok, I am working towards a solution, and found that the display:block needed to be removed in order to fit all of the list items on one line. However, I am having a problem on the fly-out list item. When I rollover "Payroll Features", there is about 20pixels of space underneath the background. Seen here:I can't find anything in the CSS that would cause this extra space. Here is the part in the CSS specific to the flyout menu:

.navmenu960 ul li ul li a.bckgroundarrow{background-image: url('/images/960/navigation/subnav-bckgroundarrow.gif'); background-repeat:no-repeat; height:25px; width:auto; display: block; margin: 0 1px;}.navmenu960 ul li ul li a.bckgroundarrow:hover{background-position: 0 -30px; height:25px; color:#88ac2e; width:auto;}

:)

[joe124c41]

Have you tried setting up a seperate IE stylesheet?I found this very effective cause IE tends to make a mess out of CSS. The rest of the browsers will ignore the code.

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" media="all"/><![endif]-->

I also found using IE Tester allows you to check the various versions of IE without having to install multiple IE browser versions.Hope this helps and good luck!

[mboehler3]

Still trying to figure out why there is the bottom spacing issue on that rollover... anybody is welcome to offer their suggestion(s).........