Editing (v7+)

Layer problem - z-index not working

Permalink October 14, 2009 at 9:02 AM

Hi guys

I finally managed to get my site looking the way I wanted.

http://www.c-ex-c.org/Testsite_textcube3/...

I got one - hopefully final for now - problem I can't solve: The layers.

The problem is the logo. It's a PNG I made, and in order for it not to inherit the opacity settings from the parent (div #header-bkg), I removed div #header-content (where the logo was located originally) and set up a single div #logo.

Now it looks like I can't get the nav menu to appear on top of the new logo. The menu is composed of div #nav and furthermore div #navinner, and using z-index both are set to be in front of the logo.

I have no clue what's wrong there. You can clearly see that the logo is on top of the menu, and it seems to not be obeying the z-index I specify...hence the two menu buttons on the right are not clickable, nor do they respond to "hover"...

Funny thing is: it works like a charm in IE8, but all other browsers, including IE8 in compatibility mode, don't get it.

My style.css:

/* ----- Structure and Layout ----- */
body {
   position: relative;
       top: -205px;
        text-align : center;
        background: url(images/background01_mountain_1920_low.jpg);
   min-width : 770px ;
   }
#logo {
/*   padding: 16px 0 0 218px;*/
        position: relative;
        top: 122px;
        left: 50px;   
        z-index:5;  
}

Viewing 15 lines of 145 lines. View entire code block.

 
/* ----- Structure and Layout ----- */
 
body {
   position: relative;
       top: -205px;
        text-align : center;
        background: url(images/background01_mountain_1920_low.jpg);
   min-width : 770px ;
   }
 
 
#logo {
/*   padding: 16px 0 0 218px;*/
        position: relative;
        top: 122px;
        left: 50px;   
        z-index:5;  
}
 
 
#wrapper {
   width : 770px;
   text-align : left;
   margin-left : auto ;
   margin-right : auto ;
        filter:alpha(opacity=75); 
      position:relative;
*/        z-index:2;*/       
   }
 
 
#header {
   padding-top: 10px;
       position:relative;
*/        z-index:3;*/
   }
 
#header-bkg {
   width: 772px;
   height: 110px;
   margin: 0 auto;
        border: 0;
        background: url(images/header_w.png) no-repeat;
       filter:alpha(opacity=75);
       opacity: 0.75;
 /*      position:relative;*/
 /*      z-index:4;*/
   }
 
 
 
#maincontainer {
   float: left;
   width : 770px;
        background-color: #ffffff;
      filter:alpha(opacity=75); 
      opacity: 0.75;
        position:relative;
*/       z-index:-100;*/
   }
 
#padding {
   clear: both;
   padding: 30px 0 0 0;
        position:relative;
       z-index:-100;
   }
 
#content {
   float: left;
   width: 380px;
   padding: 0 0 10px 40px;
        position:relative;
       z-index:3;
   }
 
#newsbox {
   float: right;
   padding: 5px 0 0 0;
   }
 
#content-left {
   float: left;
   width: 375px;
   padding: 0 0 10px 0px;
   }
 
#newsbox-left {
   float: left;
   padding: 5px 0 0 40px;
   }
 
#content-hdr {
   width: 375px;
   overflow: hidden;
   }
 
#innernews {
   width: 250px;
   margin: 40px 40px 0 0;
   padding: 10px 10px 10px 10px;
        background: #EDF3EB;
        filter:alpha(opacity=75); 
        opacity: 0.75;
   border: 1px solid #DCEAD7;
   }
 
/* ----- Navigation -----  */
 
#nav {
   float: left;
   padding: 0 0 2px 13px;
   margin: 0;
       position:relative;
       z-index:10;
   }
 
#navinner {
   float: center;
   width: 500px;
   height: 43px;
        background: url(images/background_black_round_w500.png);
       background-repeat: no-repeat;
       position:relative;
       z-index:15;
/*   border-top: 2px solid #e2001a; */
/*   border-bottom: 2px solid #e2001a; */
   }
 
#nav ul {
   margin: 0;
   padding: 0 0 0 27px;
   list-style: none;
 
   }
 
#nav li {
   float: left;
   margin: 0;
   padding: 0 2px 0 8px;
 
   }
 
#nav li a {
   float: left;
   text-align: center;
   margin: 5px 0 0 0;
   padding: 4px 12px;
   font-weight: bold;
   border-bottom: 2px solid #e2001a;
   border-right: 2px solid #e2001a;
 
 
   }
 
#nav li a:hover {
        border-bottom: 2px solid #e2001a;
   border-right: 2px solid #e2001a;
 
 
 
   }
 
#nav li a.active {
        background: #e2001a;
   border-bottom: 2px solid #e2001a;
   border-right: 2px solid #e2001a;
 
   }
 
 
/* ----- Typography ----- */
 
 
#innernews p {
   margin-left: 10px;
   padding: 0 10px 0 10px;
   border-left: 1px dashed #422100;
   }
 
 
/* ------ Footer ----- */
 
#footer {
   clear:both;       
}

Oh, and one more thing: How do I get rid of the extra space below the main window?

thanx a bunch

RizzzO

RobertJNL replied on Oct 15, 2009 at 7:02 am Permalink Reply

Hi RizzzO,

i dont have the time at this moment to dig into your css. But I managed to set the correct z-index properties forhttp://www.fashion-styling.nl maybe you can spot something usefull in there?

- Robert

red replied on Oct 15, 2009 at 9:21 am Permalink Reply

Im short on time also,but with a quick look,I can get it to work by removing the z-index on the logo,but that puts it below the header-bk and the content tag.

If you are going to use relative positioning it better practice to use it inside an absolute and sometimes fixed.

And your logo is outside your header and wrapper,which may not be a big deal,but its reacting to the body tag and nothing else.

If you could attach the image files i could rework this for you and send you the css.

mario replied on Oct 15, 2009 at 6:02 pm Permalink Reply

http://mahzeh.org/?p=23&bt=JavaScript/DHTML/AJAX&bq=cat%3D8%26showposts%3D3

Forums

Editing (v7+)

Layer problem - z-index not working

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?