Stop underlining image links
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
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
3 Answers 3
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
But this will affect all text widgets. It is probably better to assign individual class to link like
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!)
Rules only forbid promotional signatures, I don’t see any issue with posting link for the sake of giving question proper context.
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?
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.
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 🙂
I have a working solution to this issue.
In the css you need to do img or img
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 🙂
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
(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:
If you wanted to turn off underlining for just that link, you might do:
Where .widgetname is the value in the «class» attribute for the widget container.
Как убрать рамку вокруг изображений-ссылок?
Убрать автоматически добавляемую рамку вокруг изображений-ссылок.
Решение
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере используется контекстный селектор a img , который указывает использовать стиль только для изображений, расположенных внутри тега .
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?- Как добавить иконку сайта в адресную строку браузера?
- Как добавить фоновый рисунок на веб-страницу?
- Как сделать обтекание картинки текстом?
- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
- Как разместить элементы списка горизонтально?
- Как убрать подчеркивание у ссылок?
- Как убрать маркеры в маркированном списке?
- Как изменить расстояние между строками текста?
- Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
- Как открыть ссылку в новом окне?
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?Как убрать рамку вокруг изображений-ссылок?
Убрать автоматически добавляемую рамку вокруг изображений-ссылок.
Решение
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере используется контекстный селектор a img , который указывает использовать стиль только для изображений, расположенных внутри тега .
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
- Как добавить картинку на веб-страницу?
- Как добавить иконку сайта в адресную строку браузера?
- Как добавить фоновый рисунок на веб-страницу?
- Как сделать обтекание картинки текстом?
- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
- Как разместить элементы списка горизонтально?
- Как убрать подчеркивание у ссылок?
- Как убрать маркеры в маркированном списке?
- Как изменить расстояние между строками текста?
- Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
- Как открыть ссылку в новом окне?
Pure CSS: Remove Link Properties for Linked Images with Borders
CSS is very powerful. In this tutorial, we look at how to clean up styles on hyperlinks containing images (e.g., JPG, PNG, GIF) using pure CSS techniques. As well as some related tips and tricks to help you get linked images displaying exactly as intended.
There are many ways to style images with CSS . You can add borders:
..and even background graphics:
You can also use images as links to other images:
If so, you will probably want to style your links:
a:link, a:visited < border-bottom: 1px solid red; text-decoration: underline; color: red; >a:hover, a:active
But wait! By styling your text links you are also styling your image links, leaving them with unwanted bottom-borders and text-underlines. Assuming we want to fix this, a quick search on the Internet for something like “ remove image link underline ” would inevitably return the following strategy:
Yeah, right. Let’s think about that for a minute. What is the target element here, the anchor ( a ) or the image ( img )? Correct! This oft-prescribed solution for removing linked-image borders targets the image, not the anchor. This removes our previously applied border from the image, not the link. The text-decoration declaration doesn’t do anything because there are no such styles applied to the image element in the first place. Thus, instead of trying to remove link underlines, borders, and other properties by targeting the image element, we need to target any anchor elements that contain an image.
Unfortunately, CSS doesn’t accommodate qualified selectors. If it did, we easily could target image links by writing:
Until this becomes a reality (*cough*), we must seek an alternate solution. To get there, first consider the popular technique of adding a specific class to all linked images:
This method certainly does the job, removing text and border properties from all classed image links without affecting the image styles themselves. Nice, but potentially labor intensive, especially for large sites featuring lots of linked images. Do you really want to go through your database and specifically class all of your image links? Me neither.
Fortunately, CSS3 provides another way of targeting specific types of links via pattern matching and the attribute selector. The attribute selector targets specified element attributes, for example:
a[rel="nofollow"] < background: yellow; >img[alt="arrow"] < border: green; >pre[class="perl"]
In these examples, the attribute selector is targeting specific attribute values; however, with the pattern-matching capabilities of the attribute selector, we can target any of the following elemental scenarios:
- element[attribute]
— element contains the specified attribute - element[attribute=»value»]
— contains the specified attribute/value pair - element[attribute~=»value»]
— attribute value contains the term “value” - element[attribute^=»value»]
— attribute value begins with the term “value” - element[attribute$=»value»]
— attribute value ends with the term “value” - element[attribute*=»value»]
— attribute value contains the string “value”
This pattern-matching functionality of the attribute selector provides designers with a method of targeting anchors referencing specific file types. Specifically, using the [attribute$=»value»] selector, we can match any link that targets an image of any file type. For example, to target a series of thumbnails targeting a gallery of PNG images, we write:
..which effectively neutralizes borders and underlines from the linked images. Of course, we may target as many different image types as necessary. For example, here we are targeting all anchor references for JPG s, PNG s, and GIF s:
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif]
As far as I know, this is the best solution for removing anchor properties from image links without affecting image properties. Unfortunately, this technique is far from perfect. Specifically, there are two cases where this technique fails:
- Image links not referencing targetable file types
- Text links referencing targeted file types
In the first case, any image links that aren’t specifically targetable via the attribute selector will not be affected. For example, we can style image links targeting images, audio, and video file types, but for general web resources, directory URL s, and other non-targetable/non-specific references, the attribute-selector method is essentially useless.
For the second case, text links that reference targeted images will be styled accordingly. In other words, this “attribute-selector” method does not differentiate between image links and text links. Any text links pointing to images will also receive the CSS styles.
Even so, for either of these caveats, there is a workaround for specific types of image links. By using alternate pattern-matching rules, it is possible to target other character strings within the href attribute of image links. For example, links targeting a specific URL may be targeted by writing:
..which would remove link styles from any link targeting a specific domain or directory, respectively. This logic may be extended to a variety of scenarios, thereby enabling potential workarounds for either caveat scenario.
Hopefully, the techniques described in this article will give designers more power over how, when, and where their styles are applied. Especially when it comes to removing anchor properties from image links, we can use all the help we can get.