15 February 2006
The amazing whole-cell link
I'm thinking I should post more code snippets here because the number of clever JavaScript things I worked out in my last job was considerable, but because they were all stored in our inhouse knowledgebase, they all got lost when I left. Silly me without the forward-planning whatsit.
So, here's the latest. It's not quite done yet (still doesn't work well in Opera) but I'm going to come back and work on that and see if I can't get it to function properly there too. What you are about to see is...
Update, 25 April 2006: I've now fixed the code to be cross-browser across all the major browsers around at the moment. Find the updated code in "The amazing whole-cell link - part 2"
The amazing whole-cell link
To start with, here's what it does (unless you're browsing with Opera, in which case it doesn't):
First up, make your link in the div that you want to be entirely linked:
<div class="outer">
<a href="x" class="stretchylink">Link
this</a>
</div>
then do your styles:
<style type="text/css">
.outer {
border: 1px solid #cc0000;
padding: 0px; //the padding will go on the link, not the box
width: 120px;
height: 45px;
}
a.stretchylink {
width: 112px;
height: 37px;
_width: 100%; //hack for IE
_height: 100%; //hack for IE
padding: 4px; //makes the space between your text and the box edges
display: block;
}
.stretchylink:hover {
background-color: #cc0000; //sets the hover colour for the whole-cell link
}
</style>
So there you go. I haven't been able to test it on a Mac at all, so could be oddness there - if you find that, please let me know which browser & version and I'll add it to my testing list for when I get access to a Mac.
