Weirdness with images at links?

[deronsizemore]

Kentucky's Online Golf Resource - Kentucky Golfing (http://www.kentuckygolfing.com/home)

In the right sidebar, there are two images (Ryder cup and Advertise Here). For some reason the clickable area extends outside the image. It's just a simple image with an anchor tag wrapped around it, but if you hover your mouse in the white space below each image you'll see that the white space is clickable as well, which isn't right.

Anyone know what's up here? Never seen this happen before and I assume it's an error in my code, but I can't spot it.

[davemcnally]

You need to edit one tiny bit of css....

ul#advertisements li img{
padding: 0 0 20px 0;
vertical-align: bottom;
}

This is causing the clickable area to extend 20px below the image. Remove "img" from the above and all works fine. You need to to redefine the vertical-align with the img element to keep the padding the same between elements and so everything looks exactly how it did beforehand only with working image links. So it then becomes:

ul#advertisements li {
padding: 0 0 20px 0;
}

ul#advertisements li img {
vertical-align: bottom;
}

Hope this helps.

[deronsizemore]

Ah, right you are. I knew it would be simple. I wonder sometimes how something so obvious can seem so hidden when we're working on it?

Thanks I appreciate the second set of eyes.

[davemcnally]

Ah, right you are. I knew it would be simple. I wonder sometimes how something so obvious can seem so hidden when we're working on it?

Thanks I appreciate the second set of eyes.

No problem, I get stuck debugging for hours at a time before noticing it's simply a typo or something!