Currently on my site I have these product boxes that show the product name and it's respective pricing. I am trying to turn it into a button so that clients can click on the jpeg as well and be led to the application process. I have not been able to get any clickable area, the text and pricing remain the same. I have posted the coding for the product box below. Any insight would be great.

PHP Code:

<tr>
<td width="94"><table width="100%" height="90" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image:url(images/last_will.jpg); width:92px; height:107px; background-repeat:no-repeat;">
<tr>
<td align="center">&nbsp; </td>
</tr>
<tr>
<td height="6"></td>
</tr>
<tr>
<td align="center" >&nbsp;</td>
</tr>
<tr>
<td align="center" class="main_text_21">&nbsp;<a href="last_will/index.php?link=lastwill" class="new_but24"><?php echo $last_will ?></a></td>
</tr>
<tr>
<td height="8" align="center" ></td>
</tr>
<tr>
<td align="center">&nbsp;</td>
</tr>
</table></td>

define a rule so the <a>nchors that are inside the container are set to display:block they will then fill the height and width of the parent

I set the display:block code in the css file. It does work but only for firefox. In explorer the jpegs remain the same and for some reason the display:block code only works on some buttons and not others. Is there another way to define a rule not through css? I am not a coder, just trying to do this on my own without having to pay someone to do something simple like this.

here is the coding that is currently on the site. It works perfectly fine in FF but in explorer right now only the borders are clickable. The display:block; command is referenced in the CSS. If someone can take a look and see if there is an error in the coding that would be great. I am really frustrated at the moment.

PHP Code:

<td width="94"><a href="last_will/index.php?link=lastwills" class="new_but24"><table width="100%" height="90" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image:url(images/last_will.jpg); width:92px; height:107px; background-repeat:no-repeat;">
<tr>
<td align="center">&nbsp; </td>
</tr>
<tr>
<td height="6"></td>
</tr>
<tr>
<td align="center" >&nbsp;</td>
</tr>
<tr>
<td align="center" class="main_text_21">&nbsp;<?php echo $last_will ?></td>
</tr>
<tr>
<td height="8" align="center" ></td>
</tr>
<tr>
<td align="center">&nbsp;</td>
</tr></table></a></td>

You have an ENTIRE table wrapped inside an anchor element!!!

i will try this thanks..

Use an area map?

You might give this a try. I can't see everything, so I am just kind of guessing here, but I would venture to guess something like this might work...or get you a little closer.

<div style="background-image:url(images/last_will.jpg); width:92px; height:107px; background-repeat:no-repeat;">
<a href="last_will/index.php?link=lastwills" class="new_but24"><?php echo $last_will ?></a>
</div>

Try using this in place of the linked table and be sure new_but24 has "display:block" set.