z-index issues in Safari and Chrome

Question

IllBeTheJudge 0 Newbie Poster

13 Years Ago

Hello

I have been looking around for a solution to my problem but I don't seem to have hit the right one. Not sure really whether this is a jQuery issue either, as opposed to an html / css one, but here goes:

Simply put, I have a navmenu whereby I am using a jQuery plugin (called spasticnav ... can't say I like the name, but there you go) and when applying this to my site it all seems to work fine in Opera, IE8 and 9, Firefox but when opening it up in Chrome the "blob" doesn't render properly and nor does it hover over the menu links properly.

If I open the site in Safari, the first time the page loads all looks good, but if I refresh I then get a similar reaction to Chrome.

To see what the site should look like, you could use Firefox.

I have html code that looks like this:

<div id="navmenu">
        		<ul id="nav">
                	<li id="selected"><a href="http://www.electricmayhemsolutions.net">home</a></li>
                    <li><a href="#">services</a></li>
                    <li><a href="#">about me</a></li>
                    <li><a href="#">contact me</a></li>
                    <li><a href="#">my blog</a></li> 
				</ul>
           
        	</div><!-- end of navmenu -->

and I have css code that looks like this:

#navmenu {
	width: 978px;
	height: 20px;
	margin: 55px auto;
}

ul, li {
	margin: 0; padding: 0;
}

#blob {
	
	border: 1px solid #25fd01;
	position: absolute;
	z-index: 1;
	top: 0;
	background: #2D2D2D;
	background: -moz-linear-gradient(top, #2D2D2D, #444);
	background: -webkit-gradient(linear, left top, left bottom, from(#2D2D2D), to(#444));
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 2px 3px 10px #5d5d5d;
    -webkit-box-shadow: 2px 3px 10px #5d5d5d;
}

#nav {
	position: relative;
	background: transparent;
	float: right;
}

#nav li {
	float: left;
	list-style: none;
}

#nav li a {
	color: #e3e3e3;
	position: relative;
	z-index: 2;
	cursor: pointer;
	float: left;
	font-size: 15px;
	font-weight: 700;
	font-family: Calibri, Arial;
	text-decoration: none;
	padding: 0px 45px;
	width: 100%;
}

I can post js code if/when necessary, but does anyone have any ideas about this one? I have tried comparing to the original tutorial site and for the life of me cannot spot any major differences that would cause this issue (the tut site seems to work fine in both Safari AND Chrome, of course!)

Thanks in advance

chrome menu safari web-design z-index

2 Contributors
2 Replies
1K Views
21 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by IllBeTheJudge

All 2 Replies

pixelsoul 272 Red Pill

13 Years Ago

It has something to do with the DOM and the order things are being rendered in. I am not sure of the "exact" reason but it is related to the DOM. You can fix this by moving your JS files and script tag for the menu to the bottom of your page (which is a best practice anyways).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Electric Mayhem Solutions</title>
 
<link href="css/reset.css" rel="stylesheet" type="text/css" /> 
<link href="css/style_standard.css" rel="stylesheet" type="text/css" /> 
<link href="css/layout_standard.css" rel="stylesheet" type="text/css" /> 
<link href="css/grid978.css" rel="stylesheet" type="text/css" /> 
<link href="css/style_menu.css" rel="stylesheet" type="text/css" /> 
<link href="css/style_info_bar.css" rel="stylesheet" type="text/css" /> 

</head> 
 
<body> 
<div id="wrapper"> 
	<div id="headerband"> 
 
		<div id="container"> 
        	
            <div id="header"><a id="header_link" href="http://www.electricmayhemsolutions.net"><img src="images/heading.png" width="475" height="100" /></a> 
            </div> <!-- end of header --> 
        	
            <div id="intro"> 
       	  	site and services by me | adrian robertson
        	</div> <!-- end of intro --> 
			
            <div id="navmenu"> 
        		<ul id="nav"> 
                	<li id="selected"><a href="http://www.electricmayhemsolutions.net">home</a></li> 
                    <li><a href="#">services</a></li> 
                    <li><a href="#">about me</a></li> 
                    <li><a href="#">contact me</a></li> 
                    <li><a href="#">my blog</a></li> 
				</ul> 

        	</div><!-- end of navmenu --> 
       
        <div id="content" class="grid8 first"> 
        <h1 class="intro"><span>What I Do</span></h1> 
        <p>It's about building websites for you or your business, that you can then easily maintain yourself.</p> 
        <p>Obviously you want the site to look good, but you also want to be able to add or edit bits and pieces whenever you want without the hassle or worry that you're going to "break something".</p> 
        <p>That's where Electric Mayhem Solutions comes in.</p> 
        <p>Take the stress out of your web updates with easy to use CMS (Content Management System) technologies that make it simple for you do the things you need to do.</p> 
        <p>Leave the design to me.</p> 
        <p class="find_out_more">[&nbsp;<a href="#">find out more</a>&nbsp;]</p> 
        <div class="line_break">&nbsp;</div> 
        <p>It's not always about websites now, is it? It could be something else in your own computerland that you need help with.</p> 
        <p>Whether it's help setting up your new machine, getting a small local network together for your home or business (including wireless security) or looking into those pesky hardware and / or software problems, including cleaning viruses and eradicating malware, Electric Mayhem Solutions has the answer.</p> 
        <p>I also offer training services in limited software packages, including Microsoft Office, as well as being able to help you with unraveling those Windows mysteries. The best bit is, I come to you, and I can travel anywhere within the Sydney Metropolitan area.</p> 
        <p class="find_out_more">[&nbsp;<a href="#">find out more</a>&nbsp;]</p> 
        
        </div><!-- end of content --> 
        <div id="panel" class="grid4"> 
        <div id="need_web"> 
        	<p>Of course you do! Wouldn't be here otherwise, right?<br /><br /> 
            Getting a quality, modern and standards compliant website designed and built is not as expensive or "out of reach" as you may think.<br /><br /> 
        	Let me get you on the right path.</p> 
            <a id="tell_me_more" href="#"><img class="tell_more_button1" align="baseline" src="images/info_bar/tell_me_more_prod.png" width="115" height="40" /></a> 
        </div> 
            
		<div id="need_hosting"> 
        	<p>If you don't already have a website, you'll need a host as well. Let Electric Mayhem Solutions find one for you.<br /><br /> 
        	You can get a raft of services from a variety of hosting partners for only a small monthly charge, as well as domain name registration.</p> 
            <a id="tell_me_more" href="#"><img class="tell_more_button2" align="baseline" src="images/info_bar/tell_me_more_prod.png" width="115" height="40" /></a> 
        </div> 
            
		<div id="network_services"> 
        	<p>Whether it's getting your new PC up and running, hooking into a network or securing your wireless, Electric Mayhem Solutions can take out the stress of these tasks.<br /><br /> 
        	With over 15 years industry experience, no network is too old or new. I've probably seen it before!</p> 
            <a id="tell_me_more" href="#"><img class="tell_more_button3" align="baseline" src="images/info_bar/tell_me_more_prod.png" width="115" height="40" /></a> </div> 
            
		<div id="antivirus_services"> 
        	<p>We've all been there. PC acting strangely, unexplained events, things dragging to a grinding halt. Could you have picked up a virus?<br /><br /> 
        	With a broad set of tools for viruses, spyware and malware, I can help get things back working the way they should.</p> 
            <a id="tell_me_more" href="#"><img class="tell_more_button4" align="baseline" src="images/info_bar/tell_me_more_prod.png" width="115" height="40" /></a> </div> 
       <div class="break" class="grid12 first">&nbsp;</div> 
           
        </div> 
        
		</div> 
    	
	</div> 
    
 
</div> 
	<div id="footer_band"> 
    <div class="footer_text">copyright &copy; 2011 Electric Mayhem Solutions | about me | contact me</div> 
    </div> 
	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>      
  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
 
<script type="text/javascript" src="js/jquery.spasticNav.js"></script> 

 <script type="text/javascript"> 
$('#nav').spasticNav({
	speed : 1000,
	easing : 'easeOutElastic'
});
</script>

</body> 
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

IllBeTheJudge 0 Newbie Poster · Answer 1 · 2011-02-24T03:04:45+00:00

Ahah, of course
Sometimes I stare at things so long I forget the fundamentals

I have tried your suggestion and seems to have worked a treat, so thanks a bunch

For some reason I automatically stick my js references in the head section. Need to get myself out of that habit

z-index issues in Safari and Chrome

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers