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..

    Google Font API uses browser detection. How to get all font variations for font-face

    Style elements based on how many elements there are using just CSS?

    How do I apply the following CSS to only the Parent nodes of a Kendo Tree View?

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How can I convert a SASS file to a CSS file in an ANT task?

    CSS: How to have to divs side by side with height 100%?

    How to index star rating in google?

    how to make certain css 3d effect works in IE

    How can i center the list items inside my unordered list?

    how can i create true loop?

    How to change CSS for a specific page in wordpress?

    How to make a smoother animation with jQuery UI slide effect

    How to make this loading animation?

    Infuriating gap: How do you get rid of a gap between IMG and surrounding content

    How to create such (see image below) effect using pure HTML JS and CSS?

    I have an text input inside a div, how do I get the background of the div to change when the input has focus?

    How to access this children div

    CSS HTML how to remove whole cell links in tables?

    How to access dynamic div inside any div using CSS

    How to make flash movie to scale proportunatly to div width?

    How to get two divs the same height depending on which one has the bigger height in CSS [duplicate]

    how to give style to the selected option in html

    How to position a background image without background-position property

    The UI Designers and Marketing people at my company don't want “awkward line breaks”. How to do with CSS or JS? [closed]

    How to manage length of dashes

    How do I add another css to Bootstrap?

    How to create an image tag cloud

    Off-canvas navigation: How to make a second-level menu slide in on top of first-level menu without covering body text?

    Given an image button with borders how to stretch/repeat middle part in CSS for variable length content?

    Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?