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:
div
nested inside thea
? If so, please note that this is invalid in many doctypes including HTML 4 and XHTML 1.x<a>
is inside the<div>
.