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 change content of a div after link click using CSS :target?

    How to change background color of readonly textbox in css

    How to hide all element on html page except one div using css?

    How to apply css using ng-class in angularjs

    How to create a sliding navigation with either jquery or css? [closed]

    Hiding and showing
      and
    • on click using Javascript

    How to set the select to have the width of the selected option

    How JQuery can parse colors in text?

    How to achieve parallax behind horizontal bars while scrolling

    How I can change the CSS properties of HTML elements in run time using JavaScript or PHP?

    PhoneGap: How to get iPad specific CSS to work?

    How to apply CSS to half of a point feature?

    How to get rid of spaces with CSS

    how to load a css for Safari only?

    CSS: How to set minimum and maximum height according to inside?

    How to design this html Box for legacy browsers

    OS X is messing with me css, how to fix

    how to set image for anchor tag in mvc through css?

    How to play specific keyframes with css animation

    how to display data in html

    How to change css styling for different lines within a paragraph in javascript

    small space keeps showing to right side of my website w

    how to easily develop print css?

    How does max-width property make images responsive?

    layout - show the latter coded div at top without absolute positioning

    How to dynamically positioning html table by using css properties?

    How can I make my div to remain fixed and no longer change position?

    How to get the authored style properties of an element?

    Jquery show/hide more data

    How can I align to center floated divs?