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.

Solution

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.

Comments

[Yi Jiang]

Well, img a:hover definitely won't work, since img tags can't have descendants.

[Adam]

I prefer to use border-bottom because it give you a bit more options than just text-decoration:underline. With the border you can adjust the thickness and make it a different color then the text altogether.

[Adam]

Thanks for the tip. I'm still having the problem and the image border does come after the other link style. Maybe its some sort of caching problem. I'll try it on another machine in the morning.

[Adam]

Doesn't seem to help. I'm at a loss on this one.

[erik]

@Adam: can you either share a link to your page or share your html/css, there is a possibility that something else is overriding it

[KobeJohn]

I don't think this works since the border is applied to the link, not the image.

[KobeJohn]

This worked for me. As you mentioned, I think other answers here didn't realize that the problem was with the link, not with the image.

[Cameron]

This seems like a pretty lousy workaround since it will force all your images with links to be block by default right? Would a better option be to put a specific class on <a> elements that are linking off images and target it that way?