css a:link style text and images

Question

I've got a quick css questions that's bugging me, and I can't seem to figure out right now.

I've styled the links on my page to have a bottom border on on hover, but it the bottom border is appearing on image that have links as well and I can't figure out how to keep the border from appearing on the images.

Here is what I currently have.

#main a:hover {
    border-bottom:solid 1px #7b9a04;
    color:#333;
}

img, img a:hover {
    border-bottom:none;
}

However this doesn't seem to work. I don't think its any other style overriding it, because if I remove the #main a:hover style the images no longer have the bottom border, but none of the other links on the site do either then.

Answer 1

The problem is with the link element <a>, not with the image link itself. When you specify a bottom border for the hover state of <a>, it also applies to the link that contains the image. So when you hover on such a link (containing an image), it's the link that shows the border-bottom. Not the image.

There's a fix for this though. Try applying:

a img {
    display: block;
    }

This will reset the <a> styling. There is one caveat for this method — using this with inline images might break the layout. So use it sparingly.