Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Dropdown <div> area positioning problem in IE7

    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:
    Code:
    .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:
    Code:
    <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>...

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    here is the link to the site:
    http://law.vemglobal.com

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    .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;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    dschnacky (06-03-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •