css a:link style text and images

Question

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 1

According to css specificity it should be working as long as youre putting the image border css after the other css.

As an aside there's no need to have p and td separated like that.

#main a {
    color:#7b9a04;
    text-decoration:none;
}

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

Is really all you need.

Answer 2

what about explicitly defining images to have no border, after the hover declaration?

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

img {
  border: none;
}

Answer 3

How about this?

#main a {text-decoration:none;}

#main a:hover {
    text-decoration:underline;
    color:#333;
}

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

Using these codes, there is no bottom border when you hover over image links but when you hover over text links, there IS a bottom border. Is this what you're looking for?