2 jpgs in different(?) Z-index

HTML & CSS
1

When I added another jpeg to the right of the existing one and referenced it with #header2 it shifted my menu down. (I simply copied #header to #header2 in the external styles.css

http://www.drainmaster.com/index2.html

Question 1: how do I reset my menu to the correct line?
Question 2: How do bring the gif to hang OVER the menu line? (I tried Z-index:99 and set the other one in the css file to 98 but that didn’t seem to matter).

Paul

2

Is this what you are trying to do?

http://johns-jokes.com/downloads/sp/drainmaster/

.

3

Question 2: How do bring the gif to hang OVER the menu line? (I tried Z-index:99 and set the other one in the css file to 98 but that didn’t seem to matter).
Hi,
In order for z-index to work an element must be positioned as absolute, relative, or fixed. Anything other than the default of static.

I would just absolute position the second image (polychute.gif) in the header and not even nest it in a div. I would just hook an ID to it and I would hook an ID to the anchor that the first image is nested in. That way you can style each image separately without using #header img.

You will need to set position:relative on the #header to establish it as the containing block for the AP image.

[B]#header[/B] {
    [COLOR=Blue]position:relative;[/COLOR]
    height: 119px;
}
[B]a#logo[/B] { /* floats logo image left */
    float:left;
}
[B]img#chute [/B]{
   [COLOR=Blue] position:absolute;
    top:40px;
    left:275px;
    z-index: 99;[/COLOR]
    height:119px;
}

Then the html would look like this -


[B][COLOR=Black]<div id="header" [/COLOR]class="container_12">[/B]
[B]<a id="logo" [/B]href="#"><img src="/Images/logo.jpg" alt="Logo" height="119"/>[B]</a>[/B]
[B]<img id="chute"[/B] src="/Images/polychute.gif" alt="polychute height="119"[B]/>[/B]
  [COLOR=DarkGreen]<div class="headerlinks">[/COLOR]
    <p><a href="#">About Us</a> | <a href="#">Our Guarantee</a> | <a href="#">Blog</a> | <a href="#">Privacy</a></p>
    <p><strong><center>RV Waste Management</center> 
    "Simpler, Safer, &amp; Sanitary"</strong></p>
  [COLOR=Blue][COLOR=DarkGreen]</div>[/COLOR]
[/COLOR] [B][COLOR=Black]</div>[/COLOR][/B]

Question 1: how do I reset my menu to the correct line?
The code above will take care of the menu now.

4

Yes, Ray, that is what I was looking for…almost.

It looks great in Firefox, but the menu stomps over the gif in IE 7.

Any ideas?

5

Aahh yes, that is an IE6/7 z-index bug.

Your navbar has position:relative set on it with a z-value so it is stacking above the image in IE6/7.

You should be able to fix it by setting a a higher z-value on the header div since it is the parent of the AP image.


[B]#header [/B]{
    [COLOR=Blue]position:relative;[/COLOR]
    [COLOR=Blue]z-index:99;[/COLOR]
    height: 119px;
}
6

Well that will work but it layers over the “contact” link and hides the anchor thus leaving the contact link unclickable.

The problem is that you can’t set a higher z-index on that contact link because it can’t climb above it’s parent’s z-index which has to be lower than the AP image.

You could slice that 2nd header image in two parts then slice the blank space out below the hose.

7

Yo’ is a genius, Ray!

Thank-you, thank-you!

Paul