a:hover problem

[graziano68]

Hello

I have this css to apply a border up/bottom when I click on a link

a:hover {

   text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #B22222;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #B22222;
	background-color: #FFFACD;
	

}

The problem is that this applies also to link images.
How to avoid that this will be applied to images links (if a solution exists) ?

Thank you!

[Ruben K.]

Create a seperate class for image links

.imagelink
{
    border: 0;
}

And add that class to each link that has an image within the tag

<a class="imagelink"><img src="" alt="" /></a>

[Dr John]

a:hover img {border:0}

[graziano68]

a:hover img {border:0}

Thank you

But how to enter your css code on a style.css file ?

I entered it in this way but does not work

a:hover img 
{
border: 0;
}

[Ruben K.]

a:hover img {border:0}

While this removes the border from the image, it doesn not remove the border from the <a> tag

[Paul O'B]

Hi,

As Ruben said the border is on the anchor and the only (reliable) way to remove a border from the anchor is by addressing the anchor. Which means you will have to add a class to the anchors where you don't want borders.

The anchor doesn't care what content it has inside (whether its text or an image) and will apply the border as dictated by the css.

There are some tricks which are unreliable cross browser but if the image is bigger than the line-height and the anchor has no padding and isn't display:block then you can use something like this:

a img{border:none;vertical-align:bottom}

This just hides the border by putting the image on top but it only works if the situation is as I described above (and only works in some browsers).

The correct method is to address the anchor that holds the image by applying a class that removes the border.

[graziano68]

Thank you very much for great explanation.

[graziano68]

Create a seperate class for image links

.imagelink
{
    border: 0;
}

And add that class to each link that has an image within the tag

<a class="imagelink"><img src="" alt="" /></a>

Alos this solution does not work ....
I continue to see borders top and bottom when I go over an image link.

Any idea ? Thanks

[siteguru]

Which browser?

In IE6 I have found I have needed to add the border attribute to each of the pseudo-classes for it to respond correctly ...

A.imgLink:link {
    border: 0;
}
A.imgLink:visited {
    border: 0;
}
A.imgLink:active {
    border: 0;
}
A.imgLink:hover {
    border: 0;
}

[Paul O'B]

If you have given more weight to the original declarations then you need to make sure you have over-ridden it.

a.imagelink
{
    border:none!important;
}

[graziano68]

Thank you

[siteguru]

What's the definition of having given more weight?

If all the declarations are in the same CSS file, how is weight determined?

[Paul O'B]

If all the declarations are in the same CSS file, how is weight determined?

A weight is added to selectors depending on certain criteria. If you make an element more specific then it will carry more weight due to the process above.

e.g

.imagelink {color:red}

will be over-ruled by a.imagelink {color:green} because it is more specific.

however:

p#test a{color:blue}

(e.g. <p id="test"><a class="imagelink" href="#">text</a></p>)

will over-rule a.imagelink {color:green} because IDs carry more weight and is therefore more specific that the previous style.

If the rules have exactly the same weight then those that appear later in the stylesheet will win out (unless user styles have been defined using !important).

!important over-rules other rules not using !important. If they both have !important then the previous specificity rules determine the winner (except that user stylesheets using !important will take precedence).

The full details can be found here but will take some reading

http://www.w3.org/TR/CSS21/cascade.html#specificity

[siteguru]

Thanks for the explanation. I'll save reading that link until I'm suffering from insomnia.