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 2 of 2
  1. #1
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,072
    Thanks
    4
    Thanked 8 Times in 8 Posts

    CSS Drop Down menu issue in Safari 5.1.7

    I have a CSS drop down menu that works as desired in all browsers except Safari. This is what it looks like before the user hovers over the item
    -browser-menu-b4-jpg

    when they hover over the item, this is what it looks like in Chrome, Firefox, IE and Opera
    -browser-menu-jpg

    when they hover over the item, this is what it looks like in Safari
    -safarimenu-jpg

    Notice how Safari has shifted all text to the right and has a huge left margin. I have tried a multitude of different things on the subnav list trying to remove the margin in Safari but no such luck.

    Here is the relevant CSS
    Code:
    #menubar{
    	background-color: #B0C93A;
    	width:1000px;
    	height: 40px;
    	margin:0 auto;
    	z-index: 110;
    }
    #menubar-nav {
    	margin: 0 0 5px 0;
    	padding: 8px 0 0 10px;
    	list-style: none;
    	
    	}
    #menubar-nav li {
    	margin: 0;
    	padding: 0;
    	display: inline; /* fixes IE gap caused by display: block on inner a's */
    	}
    #menubar-nav li.divider {
    	background-image: url('/images/HWmenubarDivider.jpg');
    	background-repeat:no-repeat;
    	background-position:top right;
    	height:46px;
    }
    #menubar-nav a {
    	height: 46px;
    	margin: 0px 2px 3px 0px;
    	padding: 10px 20px;
    	text-decoration: none;
    	font: bold .9em Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	border: 1px solid #B0C93A;
    	line-height:1.5em;
    }
    
    #menubar-nav a:hover {
    	height: 44px;
    	color: #000000;
    	border: 1px solid #C1D04B;
    	line-height:1.5em;
    }
    #menubar-nav li ul.subnav {
    	visibility:hidden; 
    	position:absolute; 
    	top:0px;
    	left:0px; 
    	height:0; 
    	overflow:hidden;
    	z-index:900;
    	list-style-type:none;
    }
    #menubar li:hover ul,
    #menubar li a:hover ul {
    	visibility:visible; 
    	height:auto; 
    	width:120px; 
    	background:#B0C93A; 
    	left:202px; 
    	top:0px; 
    	overflow:visible; 
    }
    #menubar li:hover ul li.sub ,
    #menubar li a:hover ul li.sub {
    	border-bottom: 1px solid #CCC; 
    	position:relative; 
    	left:-40px; 
    	top:0px; 
    }
    #menubar li:hover ul li a,
    #menubar li a:hover ul li a {
    	display:block; 
    	font-weight:bold; 
    	background:#B0C93A; 
    	text-decoration:none; 
    	height:auto; 
    	line-height:1.5em; 
    	padding:0.5em; 
    	width:140px; 
    	color:#FFFFFF; 
    	border: 1px solid #B0C93A; 
    }
    
    #menubar li:hover ul li a:hover,
    #menubar li a:hover ul li a:hover {
    	display:block; 
    	font-weight:bold; 
    	background:#B0C93A; 
    	text-decoration:none; 
    	height:auto; 
    	line-height:1.5em; 
    	padding:0.5em; 
    	width:145px; 
    	color:#000000;  
    	border: 1px solid #C1D04B;
    }

    Here is the html for the menu
    Code:
    <div id="menubar">
    	<ul id="menubar-nav">
    		<li><a href="/default.asp" class="link">Career Center Home</a></li>
    		<li><a href="/jobs.asp" class="link">Career Opportunities
    			<!--[if IE 7]><!--></a><!--<![endif]-->
    			<!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul class="subnav">
    				<li class="sub"><a href="/jobs.asp">Career Opportunities</a></li>
    				<li class="sub"><a href="/jobsbybusiness.asp?cid=1">Corporate</a></li>
    				<li class="sub"><a href="/jobsbybusiness.asp?cid=2">Parking</a></li>
    				<li class="sub"><a href="/jobsbybusiness.asp?cid=3">Storage</a></li>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    		<li><a href="/dnf.asp" class="link">Incomplete Applications</a></li>
    		<li><a href="/help.asp" class="link">Help</a></li>
    		<li><a href="/admin" class="link">Administration</a></li>
    	</ul>
    </div>
    I would appreciate any thoughts on what to do to get Safari to work like the other browsers do.

    Thanks in advance for any help.

  • #2
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm sure you probably already checked this, but have you tried setting the z-index: to something like 999?


  •  

    Posting Permissions

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