CODEWITHSUNDEEP
cssinheritancehyperlink
Hesam
Hesam

Reputation: 53610

HTML CSS, Link definition, remove border off image in link

In my page I have two types of links, text links and image links. for text links, I have defined following CSS rules:

a:link, a:visited{
    text-align: right;
    text-decoration:none;
    color: #ccb771;
}   
a:hover, a:active{
    color: #333300;
    border-bottom: 2px solid #333300;
    padding-bottom: 0.25em;
}

For text links everything is OK! but for image links, underline is added when mouse goes over image. I added this code to define new rule for image links:

.bodyimage a:link, a:visited, a:hover, a:active{
border: none;
padding-bottom: 0px;

}

but this rule overrides previous links and underline do not show for text links. What should I do?

Sorry for my horrible English!

Upvotes: 1

Views: 3370

Answers (3)

musaul
musaul

Reputation: 2341

Sorry if I'm missing something, but is there a reason you are using border-bottom to add an underline to the text? if you use text-decoration:underline, your text gets underlined while images don't. Isn't that what you want?

If you want this effect only when you are hovering over the link, you want:

a {
  text-decoration:none;
  color: #ccb771;
}
a:hover {
  text-decoration:underline;
  color: #333300;
}
a img {
  border:none;
}

That should give you the colours you wanted, and underline the text while leaving the images underlined.

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27674

The problem is the border is assigned to the (hover) link. In order to remove that when there's an image present you would need a parent selector, which doesn't exist, i.e. you would need to be saying - if this link contains an img, remove the border from the parent a

parent selectors are often wished for, and are possible with JS :)

The way around it is to classify (add class to) one of the options to target either a:hover or a:hover img

kind of like this..

CSS:

a:link, a:visited{
    text-align: right;
    text-decoration:none;
    color: #ccb771;
}

a:hover, a:active{
    color: #333300;
    padding-bottom: 0.25em;
}

a img {border: 0;}

a.txt:hover, a.txt:active {
    border-bottom: 2px solid #333300;
}

HTML:

<a class="txt" href="#">text link</a> - <a href="#"><img src="http://dummyimage.com/100x100/000/fff" alt="" width="100" height="100"></a>

If you've less image links it might be better to classify the links which contain images..

Upvotes: 3

Tom Gullen
Tom Gullen

Reputation: 61773

Try putting this in your CSS:

img
{
    border:0;
}

And remove your bodyimage class. If this doesn't work, try:

img
{
    border:0 !important;
    padding:0 !important;
}

Upvotes: 0

Related Questions