SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Z-index is not working in firefox

    Code:
    .container { width:100%; float:left; }
    	.container-1 { /*background:url(../images/container_1.jpg) repeat-x; */}
    	.container-2 {/*background:url(../images/container_2.jpg) repeat-x;*/ }
    	.container-3 {/*background:url(../images/container_2.jpg) repeat-x;*/ }
    
    .row { width:100%; overflow:hidden; margin:0 auto;   }
    	.row-1 { width:1000px; /* border-right:5px solid #f1f4ea; border-left:5px solid #f1f4ea; */ }
    	.row-2 { width:1000px; /*  position:absolute; z-index:99999;  border-right:5px solid #f1f4ea; border-left:5px solid #f1f4ea; */}
    	.row-3 { width:1000px; /*  position:absolute; z-index:99999;  border-right:5px solid #f1f4ea; border-left:5px solid #f1f4ea; */}
    .blocks, .grid { float:left;  }
    	.header { width:1000px; position:relative; z-index:6; height:152px; margin:0 auto; background-color:#dfebc1; background:url(../images/header.jpg) no-repeat;  }
    	.nav{float:left; width:1000px; margin:0 auto; height:43px; background-color:#eee;  position:relative; z-index:2; ;}
    	.section1{z-index:1; position:relative; float:left; width:1000px; margin:0 auto; height:300px; background-color:green; top:-10px; }
    	
    
    	
    .search{ z-index:3; position:relative;background-color:#c00; float:left; width:300px; height:43px; }	
    .navcontainer{ z-index:4; position:relative; background-color:#dfdfdf;float:left; width:700px; height:43px; }
    .myMenu {z-index:5; position:relative; float:left; height:43px;background-color:#000; width:700px; top:0; left:0; }
    
    /***** Navigation Area *******/
    .navigation {margin:0; padding:0; }
    .navigation li{float:left; font:12px Arial, Helvetica, sans-serif #111; z-index:6; position:relative;}
    
    /* styling the list current menu*/
    .navigation  li a:link ,.navigation li a:visited { display:block; height:21px; text-decoration:none; background-color:#ff0; padding:10px; margin:0; color:#111; }
    .navigation  li a:hover { background-color:#0CF; }
    
    /* styling the sub menu item*/
    .navigation li  ul {position:absolute;visibility:hidden; margin:0; padding:0; left:0; top:43px;}
    .navigation li ul li {display:inline; float:none;}
    .navigation li ul li a:link, .navigation li ul li a:visited { background-color:#09F; width:auto; } 
    .navigation li ul li a:hover { background-color:#0CF; }
    /* .float-top {z-index:9999; position:absolute;}*/



    Code:
    <!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></title>
    
    
    <style type="text/css" media="Screen">
    @import url("styles/style.css");
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/s3Slider.js"></script>
    
    <script type="text/javascript"> 
    
    $(document).ready(function() { 
    		$('.navigation > li').bind('mouseover', openSubMenu); 
    		$('.navigation > li').bind('mouseout', closeSubMenu); 
    		
    		function openSubMenu() { 
    			$(this).find('ul').css('visibility', 'visible'); }; 
    				function closeSubMenu() { 
    					$(this).find('ul').css('visibility', 'hidden');
    				};
    		}); 
    		</script>
    
    
    
    
    </head>
    
    <body>
    <!--header start-->
    <div class="container container-1">
      <div class="row row-1">
          <div class="header">
    				 this is the header
    	 </div>
    	</div>
    </div><!--header end-->
    
    <!--nav start-->
    <div class="container container-2">
    
    		<div class="row row-2">
    	
    		  	<div class="nav">
    			 	
    			
    					<div class="search"> this is the search area </div>
    					
    						<div class="navcontainer">
    							
    									 <div class=" display-block myMenu"> 
    											<div class="navdiv">
    												<ul class="navigation">
    												<li><a href="#">menu item 1</a></li>
    												<li><a href="#">menu item 2</a>
    													<ul >
    														<li><a href="#">sub item 1</a></li>
    														<li><a href="#">sub item 2</a></li>
    														<li><a href="#">sub item 3</a></li>
    														<li><a href="#">sub item 4</a></li>
    													</ul>
    												
    												</li>
    												</ul>
    											</div>
    									
    						</div>
    			
    					</div>
    			</div>
    			
    		
    		</div>
    
    </div><!--nav end-->
    
    <div class="container container-3">
    
    		<div class="row row-3">
    	
    		  	 <div class="display-block section1">
    			 	
    				 this is a section area
    				
    			</div>
    			
    		
    		</div>
    
    </div>
    
    
    
    
    
    
    
    </body>
    </html>
    Last edited by Paul O'B; Nov 14, 2011 at 08:51. Reason: code tags added

  2. #2
    Non-Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get negative Z indexes to work in FF, give the body tag the following style elements:
    Code:

    z-index:0;
    position:relative;
    top:0;
    left:0;
    top:0;
    bottom:0;

    otherwise validate your page through in W3C validation.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to give more information when you post as it is not immediately clear to which z-index you are talking about.

    After looking at the code for a while and testing I believe you are talking about the submenu not showing up which has nothing to do with the z-index anyway so you sent us in the wrong direction to start with

    The submenu is not showing because you have hidden the overflow here:


    Code:
    .row {
    width:100%;
    overflow:hidden;
    margin:0 auto;
    }
    You will need to remove the overflow:hidden if you want the submenu to pop out. If you were using overflow as a float clearing mechanism then you will need to use one of the other methods as far as the line that contains the nav is concerned (see CSS faq on floats).

    Quote Originally Posted by online loan
    To get negative Z indexes to work in FF, give the body tag the following style elements:
    Code:

    z-index:0;
    position:relative;
    top:0;
    left:0;
    top:0;
    bottom:0;
    Sorry to take you to task for trying to help but negative z-index were not mentioned in the post

    Indeed your solution is basically meaningless and has nothing to with how negative (or positive) z-indexes are applied anyway. Finally adding "top:0; left:0; top:0;bottom:0;" is also meaningless as that is the default for a relative element anyway and specifying does nothing at all unless it was to override a previous setting.


Tags for this Thread

Bookmarks

Posting Permissions

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