a:link .. style only for textual link

Hi All,

Please take a look at the CSS snipit below. It defines have a link should look.

It looks and works great, however, It also attaches the little "Link_Icon" image to images which form links within the "AA_ArContent_Div".

Is there a way to only apply these rules to textual links, not images which form links.

Best regards

Abiel M de Groot Sanders
#AA_ArContent_Div a:link  {
	text-decoration: none;
	color: #F39D81;
	background-image: url(../../VD_Generic_Images/Link_Icon.gif);
	background-repeat: no-repeat;
	background-position: left 3px;
	padding-left: 10px;
}
 #AA_ArContent_Div a:visited  {
	text-decoration: none;
	color: #F39D81;
	background-image: url(../../VD_Generic_Images/Link_Icon.gif);
	background-repeat: no-repeat;
	background-position: left 3px;
	padding-left: 10px;
}
 #AA_ArContent_Div a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-image: url(../../VD_Generic_Images/Link_Icon_Active.gif);
	background-repeat: no-repeat;
	background-position: left 3px;
	padding-left: 10px;
}
 #AA_ArContent_Div a:active  {
	text-decoration: none;
	color: #F39D81;
	background-image: url(../../VD_Generic_Images/Link_Icon.gif);
	background-repeat: no-repeat;
	background-position: left 3px;
	padding-left: 10px;
}

Open in new window

LVL 5
Abiel de GrootDeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ramkisan JagtapLead DeveloperCommented:
write a another css class which does not contain background image. Apply it to the links containing images.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Abiel de GrootDeveloperAuthor Commented:
@ramkisan

Ok, sounds good... How?

Give me an example

A
0
Ramkisan JagtapLead DeveloperCommented:
css class as below
.linkImage{
text-decoration:none;
background-color:yourcolor;
padding-left:10px;
}
Link as below
<a href="#" class="linkImages" ><img/></a>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Ramkisan JagtapLead DeveloperCommented:
sorry
class="linkImage"
0
Kyle HamiltonData ScientistCommented:
Or, if you don't want to change your markup, add this to your css file:

#AA_ArContent_Div a img {background:none !important;}
0
Kyle HamiltonData ScientistCommented:
never mind, that won't work.... duh.
0
Kyle HamiltonData ScientistCommented:
what ramkisan is saying is good, but you have to remove the background-image previously set on the link.

add:

background:none !important;

to the rule.

You probably don't want the padding now either:

padding-left:0;

And you might want to remove the border on linked images, so add this too:

border:0;

The full class:

 
.linkImage{
text-decoration:none;
background:none !important;
padding-left:0;
border:0;
}
Link as below
<a href="#" class="linkImage" ><img/></a>

Open in new window


0
Abiel de GrootDeveloperAuthor Commented:
Many thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.