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,065
    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
    CSS Drop Down menu issue in Safari 5.1.7-browser-menu-b4.jpg

    when they hover over the item, this is what it looks like in Chrome, Firefox, IE and Opera
    CSS Drop Down menu issue in Safari 5.1.7-browser-menu.jpg

    when they hover over the item, this is what it looks like in Safari
    CSS Drop Down menu issue in Safari 5.1.7-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
    •