Background Image "Link" in CSS

Question

I've inherited a large project that already has a large markup base coupled with a short deadline, so a complete rewrite is out of the question. As such, I have an issue that needs to be resolved ASAP:

(Forgive my cryptic shorthand in advance)

I have a header that contains an UL and a DIV.

div id="header"
    ul id="nav"
        <a li />
        <a li />
        <a li />
    /ul
    div id="promotion"
        p
    /div
/div

I want the background-image (ie., the entire DIV) to be a link, so I added this to the markup:

div id="header"
    a id="overlay"
 ...

And the CSS for that reads something like this (not the exact CSS, I don't have access to the file while I'm at home):

a#overlay {display: block; width: xxx, height: xxx, z-index: -1

Now here's the kicker: the UL and the other DIV need to be positioned above "overlay," because they have their own links in them. This works in FF3 and IE8, but not IE6/IE7. I'm looking for a generic solution to this problem that is compatible in IE6/IE7 (and dropping IE6 is not an option, this is a BIG client)

Any suggestions? Here it is in simple terms: header --> link overlay --> ul with links --> other elements on top of link overlay

Answer 1

You could use JavaScript to attach a click handler to that background instead of relying on a link.

document.getElementById('overlay').onclick = function() {
    window.location = 'http://www.google.com/';
}

Answer 2

IE6/7 does not respect the z-index stacking context as you'd expect. Have you tried setting a higher index on the child elements of the parent anchor?

Answer 3

Here's the generic solution I came up with after reading the link Tate Johnson provided.

I tested it and can confirm that it works in IE5.5/6/7/8, FF3, Chrome and Safari.

I was overlooking the fact that you need to declare the position of each element if you're going to use z-index. Setting everything to position: relative (except for the link, which is set to position: absolute) did the trick.