...

View Full Version : Dropdown <div> area positioning problem in IE7



dschnacky
06-03-2010, 05:41 AM
I am having trouble with the dropdown <div> showing up underneath the wrong <li> element in the navigation. Works in everything except for IE7.
Here is the CSS for the dropdown elements:

.navbar div
{ position: absolute;
margin-top: 30px;
visibility: hidden;
width: 175px;
z-index: 1001;
background: #ffffff;
border: 1px solid #352D1A;
}

.navbar div ul.no-indent
{
margin-left: -15px;
}

.navbar div a
{
display: block;
margin: 0;
padding: 5px 0 5px 15px;
white-space: nowrap;
letter-spacing: 1px;
text-align: left;
text-decoration: none;
width: 160px;
font-size: 11px;
color: #352D1A;
border: none;
}

.navbar div li
{
width: 175px;
max-width: 175px;
height: 15px;
padding: 0 0 8px 0;
display: block;
margin
}

.navbar div li:hover
{
background: #E9E8D5;
}

.navbar div a:hover
{
background: #E9E8D5;
}
and the markup:

<div class="navbar">
<ul>
<li <?php if(!$c->getCollectionPath()):?>class="home"<?php endif;?>><a href="/">Home</a></li>
<li <?php if(strpos($c->getCollectionPath(),'/stay-overview') !== false):?>class="active"<?php endif; ?>><a onmouseover="ddopen('dd1')" onmouseout="ddclose()" href="/stay-overview">Plan Your Stay</a>
<div id="dd1" onmouseover="ddnoclose()" onmouseout="ddclose()">
<a href="/stay-overview">Stay Overview</a>
<a href="/stay-overview/seasons">Seasons</a>
<a href="/stay-overview/faq">FAQs</a>
<a href="/stay-overview/directions">Directions</a>
<a href="/stay-overview/dine-cuisine">Dining & Cuisine</a>
<a href="/stay-overview/menus">Menus</a>
<a href="/stay-overview/recipes">Recipes</a>
</div>
</li>
<li <?php if(strpos($c->getCollectionPath(),'/spa-overview') !== false):?>class="active"<?php endif; ?>><a onmouseover="ddopen('dd2')" onmouseout="ddclose()" href="/spa-overview">Spa</a>
<div id="dd2" onmouseover="ddnoclose()" onmouseout="ddclose()">
<a href="/spa-overview">Spa Overview</a><br />
<a href="/spa-overview/facial">Facial Treatments</a><br />
<a href="/spa-overview/massage">Massage/Bodywork</a><br />
<a href="/spa-overview/prenatal">Prenatal Treatments</a><br />
<a href="/spa-overview/couples">Couples Treatments</a><br />
<a href="/spa-overview/lotus-salon">Lotus Salon</a><br />
<a href="/spa-overview/gift-shop">Boutique & Gift Shop</a>
</div>
</li>
<li <?php if(strpos($c->getCollectionPath(),'/programs-overview') !== false):?>class="active"<?php endif; ?>><a onmouseover="ddopen('dd3')" onmouseout="ddclose()" href="/programs-overview">Programs & Activities</a>
<div id="dd3" onmouseover="ddnoclose()" onmouseout="ddclose()">
<a href="/programs-overview">Programs Overview</a><br />
<a href="/programs-overview/mind-body">Mind/Body</a><br />
<a href="/programs-overview/fitness">Fitness</a><br />
<a href="/programs-overview/outdoors">Outdoor Adventures</a><br />
<a href="/programs-overview/tennis">Tennis</a><br />
<a href="/programs-overview/creative-discovery">Creative Discovery</a><br />
<a href="/programs-overview/cooking-nutrition">Cooking & Nutrition</a><br />
<a href="/programs-overview/activities-schedule">Activities Schedule</a>
</div>
</li>
<li <?php if(strpos($c->getCollectionPath(),'/rates') !== false):?>class="active"<?php endif; ?>><a onmouseover="ddopen('dd4')" onmouseout="ddclose()" href="/rates">Rates & Accommodations</a>
<div id="dd4" onmouseover="ddnoclose()" onmouseout="ddclose()">
<a href="/rates">Rates</a><br />
<a href="/accommodations">Accommodations</a>
</li>
<li <?php if($c->getCollectionPath() == '/golf'):?>class="active"<?php endif; ?>><a href="/golf">Golf</a></li>
<li <?php if(strpos($c->getCollectionPath(),'/meetings-overview') !== false):?>class="active"<?php endif; ?>><a onmouseover="ddopen('dd5')" onmouseout="ddclose()" href="/meetings-overview">Groups & Meetings</a>
<div id="dd5" onmouseover="ddnoclose()" onmouseout="ddclose()">
<a href="/meetings-overview">Meetings Overview</a><br />
<a href="/meetings-overview/meeting-room">Meeting Room</a><br />
<a href="/meetings-overview/packages">Packages</a><br />
<a href="/meetings-overview/rfp">RFP</a>
</div>
</li>
<li <?php if($c->getCollectionPath() == '/speakers-events'):?>class="active"<?php endif; ?>><a href="/speakers-events">Speakers & Events</a></li>
</ul>
</div>
as you can see, i'm trying to get the dropdown elements to line up underneath their respective main nav <li>...

dschnacky
06-03-2010, 07:12 AM
here is the link to the site:
http://law.vemglobal.com

abduraooft
06-03-2010, 10:29 AM
Try

.navbar li {
display:inline;
float:left;
height:30px;
padding:0;
position:relative;
}
navbar div {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #352D1A;
margin-top:30px;
position:absolute;
visibility:hidden;
width:175px;
z-index:1001;
left:0;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum