left hand css navigation issues with IE7 - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

kfortner · 11-01-2006, 05:01 PM

I am having some issues with my left hand navigation on one of my clients' sites (focus28wellness(dot)com) when viewed in IE7. If you hover over the primary navigation items one at a time slowly, the secondaries pop out like they should, but if you roll over the primaries quickly, the secondaries all come out and stay that way even if you move off the navigation all together. The page works fine in IE6, Firefox, and Opera. Any suggestions of what could be happening? Any help would be greatly appreciated. The HTML and CSS for the menu are included below:

HTML

<ul id="nav">
<li><a href="what-is-focus28.asp" title="Learn more about Focus28">>> What is
Focus28?</a>
<ul>
<li><a href="message-from-founder.asp" title="A message from the founder of Focus28">>> Message from Founder</a></li>
<li><a href="history.asp" title="Learn about the history of Focus28">>> History</a></li>

</ul>
</li>
<li><a href="meet-our-life-coaches.asp" title="Meet Our Focus28 Life Coaches">>> Meet Our Life Coaches</a>
<ul>
<li><a href="life-coach-nancy-guberti.asp" title="Life coach, Nancy Guberti MS">>> Nancy Guberti MS, RD 
Director of Nutrition</a></li>
<li><a href="life-coach-lisa-avellino.asp" title="Life coach, Lisa Avellino">>> Lisa Avellino 
Director of Fitness</a></li>
<li><a href="life-coach-rosie-schulman.asp" title="Life coach, Rosie Schulman">>> Rosie Schulman RN, BA, CH 
Director of 
Behavioral Management 
and Empowerment</a></li>
<li><a href="life-coach-suset-carpenito.asp" title="Life coach, Suset Carpenito">>> Suset Carpenito 
Image Consultant</a></li>
</ul>
</li>

<li><a href="ask-the-experts.asp" title="Have your questions answered by the experts">>>
Ask the Experts</a></li>
<li><a href="focus28-program.asp" title="Learn more about the Focus28 program">>> Focus28 Program</a>

</li>
<li><a href="success-stories.asp" title="View Focus28 Success stories">>> Success Stories</a>
<ul><li><a href="tell-us-your-story.asp" title="Tell us your Success Stories">>> Tell us Your Story</a></li>
</ul>
</li>

<li><a href="bariatric-surgery-program.asp" title="The bariatric surgery program">>> Bariatric Surgery Program</a>
<ul>

<li><a href="bmi-calculator.asp" title="BMI calculator">>> BMI Calculator</a></li>
<li><a href="questions-and-answers.asp" title="Questions and Answers">>> Q & A</a></li>
<li><a href="bariatric-fitness-packages-and-products.asp" title="Bariatric fitness packages and products">>> Fitness Packages & Products</a></li>

</ul>

</li>


<li><a href="c-5-focus28-products.aspx" title="Visit the health supplement store">>> Health Supplement Store</a>
</li>
<li><a href="support-system-partner.asp" title="Learn about our support system partners">>> Support System Partner(s)</a>

</li>
<li><a href="news-and-events.asp" title="News and events">>> News & Events </a>
<ul><li><a href="wellness-cruise.asp" title="Wellness Cruise">>> Wellness Cruise </a>
</li>
<li><a href="articles.asp" title="Articles">>> Articles </a>
</li>
</ul>
</li>

<li><a href="newsletter.asp" title="Focus28 Newsletter">>> Focus28 Newsletter</a></li>
<li><a href="membership-information.asp" title="Learn more about Focus28 membership">>> Membership Information</a>
<ul>
<li><a href="createaccount.aspx?checkout=False" title="Join Us Now">>> Join Us Now</a></li>
<li><a href="signin.aspx" title="Login">>> Login</a></li>
</ul>
</li>

<li><a href="request-information.asp" title="Request information from Focus28">>> Request Information</a>
</li>

</ul>

CSS

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0 0 30px 0;
list-style: none;
float : left;
width : 148px;
font-size: 11px;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 2.0em;
/*margin-bottom : -1px;*/
margin-bottom : 0px;
width: 148px;
border-bottom: 1px dotted #ccc;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 159px;
margin-top : -2.0em;

}
#nav li ul li {
border-bottom: 1px solid #ccc;

}
#nav li ul li a{

color : white;
background-color : #002b7c;

}
#nav li ul li a:hover{

color: white;
background-color: #b16800;
font-weight: bold;

}

#nav li:hover, #nav li.hover {
position: static;
}

.small {
line-height: 1.3em;
font-size: 10px;
padding-left: 20px;
}
.smalltwo {
line-height: 1.3em;
font-size: 10px;

}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 148px;
w\idth : 148px;
display : block;
/*font-weight : bold;*/
text-decoration : none;
background-color : white;
/*border : 1px solid black;*/
padding : 0 0.5em;
color: #002b7c;
}

#nav li a:hover {
color : white;
background-color : #002b7c;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

**netridge** · 11-16-2006, 03:22 PM

I havent upgraded to IE7 yet, may be a bug... but I figured I would Bump this topic.

goliath · 11-22-2006, 12:28 AM

I can't get it to freeze in IE7.0.5730.11 on XP.

Is the poster still around?

liberalgeek · 11-29-2006, 08:42 PM

what do you expect from internet explorer

that said, it does work for me though