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 do I use a sprite background image to display once on an element (no-repeat)?

    how are large quantities of css templates produced?

    How to build native C++ apps with HTML/CSS UI?

    how to align horizontally using CSS

    How to access and modify imported .css files in WordPress style.css file?

    Bootstrap CSS - How to get control label with inline radios below it

    How make something like Facebook Notifications?

    Manual JavaScript Slideshow with Dynamic images

    How does Outlook.com have the title text underlined?

    How to find resources(CSS , JS Etc) that are blocking in Chrome

    CSS: How to get two DIVs side by side with automatic height, to the height of their container?

    How to make div expandable with content while setting min height property as well in CSS

    How to change the style of horizontal menu

    How To Isolate a div from public CSS styles?

    How to create this border styles in HTML/CSS? [closed]

    How to make CSS hover effect persist after clicking Bootstrap button

    how to place image on image?

    How to Protect an HTML element from it's respective assigned CSS

    How to do margin: 0 auto 0 auto minus a few pixels with CSS?

    How to dynamically allocate block of text using css?

    How to get the real font name of a div on a web page when it set css font-family?

    CSS - How do I style a select to fully occupy the td it is in

    Styling Tables - How to use column groups to modify TH tag located in that column

    Transition on div height change caused by its inner element showing or hiding

    how to align editor-label with editor-field in css

    How to make a circular image in css

    How do I force/enable vertical scrolling in this html5/css3 page?

    How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery

    How to create a gullwing shape with CSS

    CSS Layout. Can not get idea how to fix it