Links and Padding

I have an image which acts a link. It has padding on it and a background
image which is part of the effect. Is there any way of this padding being
clickable as well as the link. See the link below.

<div class="test" style="padding-bottom:20px; background:#eeeeee;
width:100px">
<a href="test.asp">
<img src="home_01_imageready_04.gif" /></a>
</div>

Chris wrote:

I have an image which acts a link. It has padding on it and a background
image which is part of the effect. Is there any way of this padding being
clickable as well as the link. See the link below.

div class="test" style="padding-bottom:20px; background:#eeeeee;
width:100px"
a href="test.asp"
img src="home_01_imageready_04.gif" /></a
/div


See "CSS troubles" <1154345067.362745.82540 (AT) b28g2000cwb (DOT) googlegroups.com

and the replies.

Short summary:

1. make the <a> display:block
2. add the padding to the <a>
3. add a width to the <a> (If you don't it will work in FF and Opera,
but break in IE)

Done.

On 2006-08-01, Chris wrote:

I have an image which acts a link. It has padding on it and a background
image which is part of the effect. Is there any way of this padding being
clickable as well as the link. See the link below.

div class="test" style="padding-bottom:20px; background:#eeeeee;
width:100px"
a href="test.asp"
img src="home_01_imageready_04.gif" /></a
/div

Put the padding in the anchor, not the div.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)