Question

I have a DIV that is relatively positioned. The whole DIV needs to link to another page.

What I’m doing is adding a link inside the div and applying this CSS to it:

.f170region .linkcover {
    background: #FFF;
    bottom: 0;
    display: block;
    filter: alpha(opacity=0);
    hasLayout: true;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
}

What this does in all browsers other than IE6 is make the link act as a click-able layer over the DIV. The link also has an .ir class added to it to hide the text from inside the link off the screen:

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

Anyone got a solution to get this to work in IE6. And please don’t give me the lecture about supporting IE6. I’m right there with you.

Here is the HTML that uses this method:

    <div class="alpha omega grid_4 f170region white" id="home_bg_youthzone">
        <h2 class="hidden">Youth Zone</h2>
        <div class="copy">There are many ways for younge residents to get help and support. Find out more...</div>
        <div class="getin">
            <p><span class="pink">Get</span><br />involved</p>
            <p><span class="pink">Get</span><br />in the zone</p>
        </div>
        <a class="linkcover ir" href="<?php echo site_url("/youth-zone/"); ?>" title="Go to Youth Zone">Go to Youth Zone</a>
    </div>

EDIT 2:

http://jsfiddle.net/9gSUd/

Answer 1

I’ve found the solution using a spacer.gif file as the BG. I was using this fix to make the overlay work properly in IE http://kevindees.cc/2011/01/ie-adjacent-positioning-image-and-link-overlap-css-fix/

This would set the BG to white but set the opacity to 0. This worked in all version of IE but IE6. By setting the background to a spacer.gif instead of white and setting the width/height of the link to 100% I got a working solution in IE6 and all browsers. Here is my final CSS for the link:

.f170region .linkcover {
    background: url(../images/spacer.gif) no-repeat 0 0;
    bottom: 0;
    display: block;
    filter: alpha(opacity=0);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;
}