Adam Adam - 1 year ago 59
CSS Question

css a:link style text and images

I've got a quick css questions that 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 Source

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.