Removing link decoration from an image while still keeping a border

[simontheak]

I've come across a problem with the images I'm using as links.

I want to remove the ugly blue border that naturally comes from using an <a> tag with an image ... but I still want to include a dotted right border to separate the image from the following picture.

You can see what I mean by looking at the icons in the top right hand corner at http://www.theshortstack.co.uk

I've tried using the following CSS:

img.firsticon {
padding-right: 5px;
}

img.firsticon a{
text-decoration: none;
} 

It's obviously not working though.

Would somebody be able to point out where I'm going wrong please?

Thanks very much

[Centauri]

You have to first remove the border, and then add the left one if desired :

img.firsticon {
padding-right: 5px;
border: 0;
}

img.icons {
border: 0;
border-left: thin dotted #cccccc;
padding-left: 5px;
padding-right: 5px;
}

By the way, img.firsticon a is not valid, as this means an anchor element inside an image with class "firsticon"

[simontheak]

By the way, img.firsticon a is not valid, as this means an anchor element inside an image with class "firsticon"

So do I want it round the other way then?

a.firsticon img{

}

[Centauri]

No, that means an image contained within an anchor element with the class of "firsticon", which does not apply to your html either. The images in question have the classes, so can be targeted as in the code block I posted - no reference to the <a> is required.

[Paul O'B]

I always use the following to kill all image borders from the start.

a img {border:none}

You can then just set what you want as you go.

(Also remember that text-decoration is on the anchor itself and not on the image.)