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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts

    css menu breaks in safari

    I have an ordered list used to create a css menu. The menu works fine in firefox and IE. But in safari, it seems like the dropdowns are pushing over the other first-level navigation items, almost as if they were still set up horizontally.

    Here's the css and the navigation.. To see them in action and the mistake I'm talking about, you can check out http://216.38.52.184/index.php

    Code:
    <style>
    #navbar {
    	position: absolute;
    	top: 199px;
    	left: 184px;
    	margin: 0;
    	padding: 0;
    	z-index:200;
    	height:0px;
    	overflow:visible;
    	}
    #navbar li {
    	list-style: none;
    	float: left; }
    	
    #navbar li a {
    	display: block;
    	padding: 3px 8px;
    	text-align:left;
    	font-size:.8em;
    	text-transform: uppercase;
    	text-decoration: none; 
    	color: #999;
    	position:relative;
    	left:25px;}
    #navbar li a:hover {
    	color: #000; }
    	
    #navbar li ul {
    	display: none;  }
    #navbar li:hover ul, #navbar li.hover ul {
    	position: relative;
    	display:block;
    	left: 0;
    	width: 0;
    	overflow:visible;
    	margin: 0;
    	padding: 0; }
    	
    #navsub1 {position:absolute;top:-41px;left:139px; overflow:visible;background-color:#ffcc66;
    }
    #navsub2 {position:absolute;top:-36px;left:129px;background-color:#ffcc66;width:180px;}
    
    #navsub3 {position:absolute;top:-22px;left:162px; overflow:visible;background-color:#ffcc66;
    }
    
    #navsub4 {position:absolute;top:-9px;left:19px; width:150px;overflow:visible;background-color:#ffcc66;
    }
    
    #navbar li:hover li, #navbar li.hover li {
    	 }
    #navbar li:hover li a, #navbar li.hover li a {
    	color: #000;background-color:#cc9900;width:130px;line-height:2em;
    	}
    #navbar li li a:hover {
    	color: #357;background-color:#ffcc66;width:130px;line-height:2em;
    	}
    </style>
    
    <div id="navbar" style="z-index:700;width:100%;">
    	<ul>
    		<li class="active"><a href="index.php" class="active"><img src="images/b_hm1.gif" border=0></a></li>
    		<li><a href="mission.php"><img src="images/b_mi1.gif" border=0></a></li>
    		<li><a href="workshops.php"><img src="images/b_wrkshp1.gif" border=0></a>
            <!--href="workshops.php"-->
            <ul id="navsub1" style="z-index:705;">
    		<?php while ($row = mysql_fetch_array($result_cats)) {
    			$catid = $row['cat_id'];
    			$catname = $row['cat_name'];
    		echo "<li><a href='workshopssub.php?id=".$catid."'>".$catname."</a></li>";
    		}; ?>
    	</ul>
            </li>
        	<li><a href="impact.php"><img src="images/b_imp1.gif" border=0></a></li>
    	<li><a href="about.php"><img src="images/b_who1.gif" border=0></a>
            <ul id="navsub2" style="z-index:720;">
    		<li><a href="about.php">About Workshops</a></li>
    		<li><a href="why.php">Why we do it</a></li>
    		<li><a href="staff.php">Staff</a></li>    
    		<li><a href="volunteers.php">Volunteer Mentors</a></li>
    		<li><a href="board.php">Board of Directors</a></li>  
    	</ul>
    	</li>   
        	<li><a href="contact.php"><img src="images/b_cntct1.gif" border=0></a>
    	<ul id="navsub4" style="z-index:720;">
    		<li><a href="contact.php">Contact us</a></li>
    		<li><a href="support.php">Donate!</a></li>	 
    	</ul>
    	</li>
    	
          	<li><a href="media.php"><img src="images/b_kudos1.gif" border=0></a>
    	<ul id="navsub3" style="z-index:720;">
    		<!--<li><a href="alumni.php">Alumni</a></li>-->
    		<li><a href="awards.php">Awards</a></li>
    		<li><a href="media.php">Media</a></li>    
    		
    		 
    	</ul>
    	</li>
    	
    	</ul>
    	</div>

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    When doing this i normally have a position absolute.
    try something like this
    #navbar li ul { position:absolute; display:none; }

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts
    ah! Ok.. that may have solved part of the problem..

    I added that and now in firefox and safari the first level navigation now stays put, but the subnavs all come up in the same spot on the page, regardless of which main navigation item was rolled over... Do I need to find a way to write the css with an id to each dropdown? Not quite sure how I'd write that, but it seems like it'd also be a bit more coding than I should have to do? not sure. Here's what I've got in that spot now:

    Code:
    #navbar li ul {
    	position:absolute; 
    	display: none;  }
    
    #navbar li:hover ul, #navbar li.hover ul {
    	position: absolute;
    	display:block;
    	left: 0;
    	width: 0;
    	overflow:visible;
    	margin: 0;
    	padding: 0; }

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts
    actually... i had the subnavs named in there and was able to readjust them. problem solved. thanks!!

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Glad i could help.
    Thanks


  •  

    Posting Permissions

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