Links and Padding

[Chris]

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>

 

[jojo]

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" <[email protected]>
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.

 

[Chris F.A. Johnson]

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.