Forums

vladyn

Hello everyone,
I'm using this technique from a long time and always wondering how to get rid of the remaining border-bottom on the images, which are links:
example

a:link {
	background: inherit;
	color: #cf432e;
	text-decoration: none;
	border-bottom: 1px solid #cf432e;
	padding-bottom: .1em;
	line-height: 140%;
}

and I don;t want this to affect the image, where I have:

<a href=\"#\" title=\"\"><img src=\"\" alt=\"\"/></a>

any ideas ?

EamonnMac

Not entirely certain what you need here, so forgive me if I'm wrong, but if it's a case that you just don't want any link decoration on an image, just put this in your CSS:

a			{ outline: none; text-decoration: none; }
a img	{ border: none; background: none; }

That'll remove any borders or backgrounds placed by default by the browser to any image acting as a link. (The first line is to remove decoration from regualr links) You can still style individual images if you give them an ID...

vladyn

I'm trying to remove the border style from the images, which are inside A tag

in your example you'll remove the border from the img tag, but with a {border-bottom: 1px solid #FFF000} you actually applying the border to a A element, which is the parent element in above example

apostrophe

Give all of your links with an image a class.
eg.

<a class=\"image\" href=\"#\" title=\"\"><img src=\"\" alt=\"\"/></a>

and remove the border via that class

a.image {
 border: none;
}

kamil

Try this

a.image {
border: 0px;
}

TheDoc

"kamil" said:
Try this

a.image {
border: 0px;
}

This would not work. The only way that would work is if you <a> had a class of "image". <a class="image">

treehouse : what would you like to learn today?

Forums

alternative links border-bottom and images...