Stop underlining image links

Question

One my widget bar, I have an image which is hyperlinked. The problem is that CSS underlines it. How do I remove the underline?

Update: Just noticed that this is what is causing the underline:

}
.entry a,
.secondaryColumn a,
#commentsContainer h3 a,
.commentlist .comment-author a {
    border-bottom: 1px solid #ddd;
    color: #3c6c92;
    font-weight: bold;
}
.entry a:hover,
.secondaryColumn a:hover,
#commentsContainer h3 a:hover,
.commentlist .comment-author a:hover,
.commentlist .comment-meta a:hover {
    color: #3c6c92;
    border-bottom: 1px solid #3c6c92;
}

changing the border-bottom to 0px does the trick, but then it takes off the border across all widgets. I use Grid-focus with a wee bit of customization @ thunderror.com

Answer 1

By definition it isn't really hyperlinked image. It is hyperlink tag a that contains image tag img. Most probably it is a link that is really underlined, image is just inside it.

You need to create new CSS rule that matches your link with image and specifies no underline (it could also be border-bottom property by the way, some recommend it over underline for better typography looks).

If possible please give link to the site. CSS in theory is even worse than PHP in theory. :)

I assume it's about twitter image at top of sidebar? Try this:

.textwidget a, .textwidget a:hover { border-bottom: none; }

But this will affect all text widgets. It is probably better to assign individual class to link like

<a href="http://thunderror.com/" class="twitter-link">

and style it.

Answer 2

I have a working solution to this issue.

`<ul><li><a href="#"><img alt="" src="/images/your/image.jpg"> The text you want underlined on hover</a></li></ul>`

In the css you need to do img{display: block;} or img{float: left;}

Of course, it's up to you which option to choose based on your needs.

I hope this helps solve the issue for you (albeit a year later) and any one else with the same issue.

A working example can be seen at The Book Depository blog. Look for the Publishers Blog section bottom right :)

Answer 3

Edit: to answer your revised and expanded question:

You've run into a wonderful thing called css specificity. I'll let you Google for the gory details, but basically, ".commentlist .comment-author a" flips more specificity bits than ".twitter-link".

If you want to override the style, you'd need to do so like so:

.commentlist .comment-author .twitter-link {
    border-bottom: none;
}

(I'm about 99% certain that a class name (.twitter-link) is more specific than an element name (a). If the above doesn't work, you may need to add a class like "twitter-widget" to the widget, and then override with ".commentlist .comment-author .twitter-widget a { ...")

---

Older answer, which may still answer more general questions:

Well, if you want to turn on link underlining globally, you could add the following bit of css to style.css:

a { text-decoration: none; }

If you wanted to turn off underlining for just that link, you might do:

.widgetname a { text-decoration: none; }

Where .widgetname is the value in the "class" attribute for the widget container.