A few weeks ago I posted a code snippet for "The amazing whole-cell link" stating that it did have a few quirks still, didn't work in Opera, etc.

I've now fixed the problems! And this version should work in all major browsers now, although I still haven't been able to test it on a Mac...

First up, make your link in the div that you want to be entirely linked:

<div class="anchors">
<a href="x" class="stretchylink">Test link here</a>
</div>

then do your styles:

<style type="text/css">
.anchors {
width: 275px; /* width of outside box (max width for link in all browsers) */
height: 38px; /* height of outside box (max height for link in all browsers) */
border: 1px solid #000000; /* set if desired */
}
a.stretchylink {
width: 273px; /* the width of the box less twice the width of any border */
height: 36px; /* the height of the box less twice the width of any border */
padding: 8px; /* as required */
display: block; /* yes, you need this - use float on .anchors if you need to line boxes up side by side */
}
:root a.stretchylink { /*FF/Moz setting*/
width: 259px; /*the width of the box less the sum of all horizontal padding on the link*/
height: 22px; /* the height of the box less the sum of all vertical padding on the link*/
}
.anchors a.stretchylink:link, .anchors a.stretchylink:active, .anchors a.stretchylink:visited {
color: #000000; /* set link text colour & any other required attributes */
background-color: #ffffff; /* set original background colour */
}
.anchors a.stretchylink:hover {
background-color: #ebebeb; /* set hover colour */
}
</style>

And that's all there is to it! Of course, feel free to remove the comments from the code - they're just there to explain what each line does and how to work out the pixel values. Hope it's useful!

# posted by minim @ 11:43 PM