I must be getting old and forgetful, z-index problem

[dc dalton]

Well that and I honestly haven't used z-index in at least 6 or 7 years.

Anyway, my problem. I have a layout I am coding and the designer got a touch crazy with borders and gradient backgrounds but the customer loves it so I'm stuck with it.

The top of the wrapper div has a gradient and borders on the two sides, so I chopped that part out and dropped into the div as an image. I then took a slice of the non gradient part of the background and set it as the background of the div.

I did a position: absolute on the gradient image to take it out of the flow and then a z-index: -1 on it but the image is dropping behind the main body background, essentially disappearing. I wont bore you with all the code, just this particular section:

<div id='wrapper'>
  <img src='/images/top_inner_bg.jpg' width='982' height='191' alt='' style='position: absolute; z-index: -1;' />
  <div id='main_content'>
 
    <div id='top_blocks'>
      <div id='f_train'></div>
      <div id='p_train'></div>
      <div id='d_prod'></div>
    </div>
 
    <div id='intro'>	</div>
 
    <div id='bot_text'></div>
 
  </div>
</div>

As I said the stuff in the main content falls behind the image without the z-index set but with the z-index set (as shown) the image then drops below the body's image

Anyone care to kick this old man in the brain and refresh my memory?

[ralph.m]

No promises, but try putting position:relative on the #wrapper. Then the absolute positioning of the gradient will be in relation to the wrapper rather than the viewport.

[Luki_be]

Just as a reminder: negative z-indexes are treated differently by various browsers so it's best not to use them.

[dc dalton]

No promises, but try putting position:relative on the #wrapper. Then the absolute positioning of the gradient will be in relation to the wrapper rather than the viewport.

Nope, still a no go.

Tried everything here ... even went as far as to set the z-index on everything from the body up ... nada.

[dc dalton]

I through a copy of it up on my server so you can look at the code:

http://davidcdalton.com/layout.html

css: http://davidcdalton.com/styles/pds.css

[PicnicTutorials]

I feel you! I had a tough run at the same a while back. Is it the flag/gun area that your refering to? Negative z won't work. As you found, it will put it behind it. Two other things I would try if you can't work out the z index thing. A img will always go on top of a background. So maybe make them both an img (not a background). Or, why splice them?can you just splice the whole header and make it one image?

[ralph.m]

Nope, still a no go.

Huh, it works in IE7. O well, as Luki and Eric said, negative z index is no go overall.

My suggestion is this: why use a background image on the #wrapper when it is just white? (At least, it seems to be.)

I would put the gradient as the background image on the wrapper and let the background color be white (or whatever shade you want). Rather than have the side borders as part of the image, just put them as borders on the wrapper itself, rather than using images.

[dc dalton]

I feel you! I had a tough run at the same a while back. Is it the flag/gun area that your refering to? Negative z won't work. As you found, it will put it behind it. Two other things I would try if you can't work out the z index thing. A img will always go on top of a background. So maybe make them both an img (not a background). Or, why splice them?can you just splice the whole header and make it one image?

Huh, it works in IE7. O well, as Luki and Eric said, negative z index is no go overall.

My suggestion is this: why use a background image on the #wrapper when it is just white? (At least, it seems to be.)

I would put the gradient as the background image on the wrapper and let the background color be white (or whatever shade you want). Rather than have the side borders as part of the image, just put them as borders on the wrapper itself, rather than using images.

The area in question is right below the menu ... here's a 2nd copy with the image's z-index removed so you can see it for yourselves.

http://davidcdalton.com/layout2.html

The problem is the background has a border on both sides and a gradient at the top (and bottom) that fades to white in the middle. Obviously you can't tile something like that and once I get into the product listings in the site that pages are going to get long.

Also the border that is on the wrap is a multi pixel / multi color border, tough to do with CSS without more 'divitis' than I already have.

[ralph.m]

O well, just put z-index: 1; (not -1) back on the image and add this to your styles:

#main_content, #sidebar {position:relative; z-index:10}

[dc dalton]

O well, just put z-index: 1; (not -1) back on the image and add this to your styles:

#main_content, #sidebar {position:relative; z-index:10}

Ya know, I tried that exact same thing a few hours ago and it didn't work but now it does ..... methinks my FF is screwing with my head.

thanks

[ralph.m]

Ya know, I tried that exact same thing a few hours ago and it didn't work but now it does ..... methinks my FF is screwing with my head.

You obviously got caught by one of those mischievous sprites that love to torment poor web developers.

[dc dalton]

You obviously got caught by one of those mischievous sprites that love to torment poor web developers.

Nah just how my week has been going .... yesh

thanks again