Jump to content

My Nav Menu Really, Really Breaks In Ie6


mboehler3
 Share

Recommended Posts

Hi, I have a nav menu which looks like this on IE7, IE8 and Firefox 3.5:screen-correct1.gifThe 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:screen1-1.gifWhen I rollover a list item, the rollover state extends like 800 pixels, like this:screen2-1.gifscreen4.gifOnly 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:screen3.gifHere 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.

Link to comment
Share on other sites

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:payfeatures-bump.gifI 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;}

:) :)

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...