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


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.

| improve this answer | |
  • Yeah I know, but I wasn't sure about the rules of putting up your blog address out here! (could be construed to be self promotion!) – thunderror Sep 20 '10 at 5:37
  • Rules only forbid promotional signatures, I don't see any issue with posting link for the sake of giving question proper context. – Rarst Sep 20 '10 at 6:07
  • Here's the problem, The image is inside a text widget which has the class textwidget. Would creating the class"twitter-link" inside the widget work? Or should I put it out in the sidebar? – thunderror Sep 20 '10 at 11:00
  • 1
    Class on link would work perfectly, no matter where link is. Then just style .twitter-link {} and it would have higher priority than styling inherited from widget. – Rarst Sep 20 '10 at 11:13
  • Just as I thought, it doesn't override. .twitter-link { border-bottom: 5px solid #555 ; } Note: I created it at 5px to show that both classes are effective. so you see 2 lines now! (I accepted the answer +1, and now you're over 1000! that's the least I could do :) – thunderror Sep 20 '10 at 18:15

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 :)

| improve this answer | |

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.

| improve this answer | |
  • Well tried it out, and then realized that the problem was different (updated question) – thunderror Sep 20 '10 at 5:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.