Posted by Andrew Bailey on 12/10/06 10:13

"David Smithz" <dave1900@blueyonder.co.uk> wrote in message
news:q_Jeh.14235$k74.11144@text.news.blueyonder.co.uk...
> Hi there,
>
> I have a 1row * 1 column table containing a text which acts as a
> hyperlink.
>
> My aim is to have the text positioned in the cell but the visitor to be
> able to click anywhere within the cell to be able follow the hyperlink.
> (Not just the actual text itself and without relying on JavaScript).
>
> I'm using the following code:
> <div id="ExBox1" class="ExBox">
>
> <table style="width:100%; height:100%; border:0px; padding:0px;">
> <tr>
> <td style="text-align:right; vertical-align:bottom; height:100%;
> "><a href="./index.htm"> URL TO FOLLOW. I WANT TO BE ABLE TO CLICK
> ANYWHERE IN TABLE CELL,, NOT JUST THE ACTUAL TEXT </a></td>
> </tr>
> </table>
>
> </div>
>
> With the class for ExBox defined as:
> .ExBox {
> position:absolute;
> background-color: #000000;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 14px;
> color: #666666;
> background-position: center center;
> font-weight: bold;
> letter-spacing: 0.04em;
> width:150px; height:70px;
> z-index:1;
> left: 100px; top: 100px;
> text-align: right;
> }
>
> .ExBox a:link { color:#FFFFFF; text-decoration:none;
> vertical-align:text-bottom;}
> .ExBox a:active { color:#FFFFFF; text-decoration:none;
> vertical-align:text-bottom;}
> .ExBox a:visited { color:#FFFFFF; text-decoration:none;
> vertical-align:text-bottom;}
> .ExBox a:hover { color:#FFFFFF; text-decoration:none;
> vertical-align:text-bottom;}
> (Note: I added the vertical-align:text-bottom part when I was
> experimenting and probably now not necessary)
>
> I have tried a few things (e.g. such as putting the anchor (<A>) around
> the table rather then the text in the table but it does not work properly
> when I do this.
>
> Any suggestions on how to achieve this?
>
> (I will also be adding the effect (via JavaScript) that when the mouse is
> moved into the cell the entire background colour changes - I can achieve
> this but no point having it if you cannot actually follow the URL until
> moving over the text).
>
> Thanks in advance.
>
>
>
>


Hi David,

Just put a nested <div> inside your anchor like this....

<div id="ExBox1" class="ExBox">

<table style="width:100%; height:100%; border:0px; padding:0px;">
<tr>
<td style="text-align:right; vertical-align:bottom; height:100%;
"><a href="./index.htm"><div height="100%"> URL TO FOLLOW. I WANT TO BE ABLE
TO CLICK ANYWHERE
IN TABLE CELL,, NOT JUST THE ACTUAL TEXT </div></a></td>
</tr>
</table>

</div>


Hope that helps

Andy

[Back to original message]