How do I remove the underline from an image wrapped in an anchor?


Tags: css

Problem :

Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.

So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.



Solution :

Try this:

<style type="text/css">
a img { text-decoration: none } // Images within 
</style>

However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.

It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:

a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }

    CSS Howto..

    How to attach CSS to my template?

    How often is the default font size in the browser not 16px?

    HTML layout with vertical divider and menu between sections - how?

    How To Put Values Dynamically

    How can I set different background images for different li with same class

    How to create grid position elements like in this image css

    How to move the scrollbar down

    How can you have your websites resolution change according to the users screen resolution?

    How to use form-inline bootstrap 3?

    How to build a complex table by using CSS?

    How to center a component without knowing its width in Css

    CSS: How to clear a floating object only one level, not the all the way to the left?

    How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?

    How to perfectly center a “plus” sign in a circle using CSS

    How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

    How can I include a CSS stylesheet in an XSL document for Internet Explorer?

    How to get messages column up on the right?

    how to make background-image included via a “class” responsive

    Javascript Slider not showing and Graph tips

    Bootstrap 3 - How to change the hyperlink title text showing as tooltip using javascript/jquery?

    How to put 3 of these tables into the correct spot with CSS

    how to change CSS priority (don't use !important)

    How to make flashing text in Css? [duplicate]

    How to overlay zoom icons over images and always keep them lined up perfectly?

    How to top align two divs inside a third one?

    How to make a “wrappanel” in html?

    How to pause a Spinkit animation?

    How to fade out after hover is done using CSS

    Rails How to include a scss file in a specific erb view? [duplicate]

    How do I align elements using CSS?