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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts

    z-index issue? Navbar lists hidden by top div

    Hi,

    Please see URL: http://www.backstageweb.net/spca/index.html

    Navbar dropdown lists are dropping down behind the #featured <div>. I tried adding a z-index property to both the navbar (high z-) and #featured (low z-) but this didn't work. I'm pretty sure there's an easy fix, I just don't know what it is.

    Thanks for any help.

    John

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Without seeing the code, it is difficult to say, but FireBug shows that <div id="content"> is not z-indexed while div id="featured"> is. I know it visually looks like featured is where the overlap is, but because it is within a div that is auto z-indexed, it actually appears that the top of content is the culprit.

    Were it mine, I would remove all of your existing z-indexes and only index content at 1 and smoothmenu1 at 2: let the nested elements inherit. If that does not fix it, then I would recommend posting the relevant code so we can better see what's going on.

  • Users who have thanked M.Jackson for this post:

    johndove523 (10-05-2011)

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    Thanks M, for your reply. Your suggestion seemed like a good one, but it (along with several other variations) didn't work. As for the relevant code, I'm not sure what code you're referring to that isn't transparent via Firebug, but here's what I think is the most relevant code and the latest variation (with more specifically indexed divs) I've tried stemming from your original suggestion:

    Code:
    .ddsmoothmenu{
          font: bold 12pt Verdana;
          background: #ebebeb; /*background of menu bar (default state)*/
          width: 100%;
          z-index:4;
    }
    
    #header {
    	background-image:url(../images/header_bkgrnd.jpg);
    	width:1100px;
    	height:432px;
    	display:block;
    	overflow:hidden;
    	z-index:3;
    	}	
    	
    #featured {
    	width:99%;
    	height:260px;
    	background-color:#d8d6d6;
    	overflow:hidden;
    	border:3px solid #c3de90;
    	z-index:2;
    	}
    
    #content {
    	margin-left:17px;
    	width:1070px;
    	overflow:hidden;
    	z-index:1;
    	}
    Thanks,

    John

  • #4
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    z-index works only with positioned element like position:absolute, relative, fixed..

  • Users who have thanked masterbouc for this post:

    johndove523 (10-05-2011)

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    or maybe the problem is all the overflow:hidden..

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Yes, remove overflow:hidden from #header.

  • Users who have thanked SB65 for this post:

    johndove523 (10-05-2011)

  • #7
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    z-index works only with positioned element like position:absolute, relative, fixed..
    I was wondering about that, good to know. Overflow property gone, works fine. Thank you guys!

    John

  • #8
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    Now my only question is how to mark this thread resolved. : )


  •  

    Posting Permissions

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