Z-index not working. What to do?

[YtAnd]

The site I am building is at http://tiny.cc/vbw71.

 

My problem: The text box is covering up the bottom of the flower image.

 

There are two header images: headerA which is the real header, and header B, which is the problem. Header B contains the bottom of the flower image and actually some of it is showing. It is a background image on the div called "forHeaderB" that I made just for that reason.

 

More specifically: If I put a bunch of

s in the code between "forHeaderB" and the text box, the rest of the image shows. So I figure its back there somewhere. I tried to set the Z-index of the "forHeaderB" div to 55 and everything else to 0, but it's still hiding back there.

 

Any thoughts? I am floating the nav to the left and the content to the right, so would rather not get into absolute positioning unless absolutely necessary.

 

(I tried creating a box with a transparent top and the cut-off part DOES show through, but it's just a CSS nightmare because all the rest of the boxes' tops will do the same thing and be more obvious.)

[Andrea]

Z-index isn't set in pixels. http://www.w3schools.com/Css/pr_pos_z-index.asp

 

Also, setting your height at 5000px will likely lead to issues - 5000px makes for a very long page, and every page on your site will be different. Usually, you get away with not setting a height and letting the content determine what is needed.

[YtAnd]

Okay, I updated those issues on the page (making the z-index plain old "55") and the problem still stands. Any other ideas?

[Wickham]

It should be possible to put headerB1.gif on top of boxtop.gif with position: relative and z-index but I decided to put in a normal image with position: absolute and deleted the background-image:-

 

#forHeaderB {   
   width:775px;                  
   /*background-attachment: scroll;*/
   /*background-image: url(../images/headerB1.gif);*/
   /*background-repeat:no-repeat;*/
   /*background-position: 0px 482px!important;*/
   /*z-index: 55;*/
   overflow:hidden;
}
.box {                        position: relative;   /*added*/
   width:535px;
   background: url(../images/boxtop.gif) no-repeat top left;
   margin:0;
   padding-left:0px;
   padding-bottom:0px;
   padding-top:5px;
   border:0;
   text-align:center;
}

#box1 { position: absolute; top: 0; left: 0; width: 775px; height: 85px; 
margin-left: -220px; }

 

 

and the body markup:-

...................


Here's all the stuff in the box. ...............

 

OR here's the z-index method (don't mix with the above):-

 

#forHeaderB {   position: relative;
   width:775px;            
   background-image: url(../images/headerA.jpg);
   background-repeat:no-repeat;
   background-position: 0 0;/* !important;*/
       background-attachment: scroll;
   /*z-index: 55;*/
   overflow:hidden;
}

#header {    position: absolute; z-index: 55;
   /*float:left;*/  top: 482px; left: 0;
   width:775px;
   height:85px;/*482px;*/
   background-image:url(../images/headerB.gif);
   background-repeat:no-repeat;
   background-position: 0px 0px;
   background-attachment:scroll;    
   overflow:hidden;
}
#content_n_nav {  margin-top: 482px;
   float:left;                       
   width:775px;
   overflow:hidden;
}

.box {                        position: relative; z-index: 1;  
   width:535px;
   background: url(../images/boxtop.gif) no-repeat top left;
   margin:0;
   padding-left:0px;
   padding-bottom:0px;
   padding-top:5px;
   border:0;
   text-align:center;
}

 

No edits or extra normal image in your htm file needed. Note that the background-images of #forheaderB and #header have been swapped.

Edited December 15, 2009 by Wickham

[YtAnd]

Wow, I'm really impressed.

I stuck with the z-index method because that makes the most sense to me right now, but will study the "normal image" strategy too.

I'm so grateful for your help, Wickham. Happy holidays!