CODEWITHSUNDEEP
htmlcss
Uncoded
Uncoded

Reputation: 39

html image link hover shows anchor box below image

Having trouble with using images as links. The problem is that when hovering over the image the boarder highlights as required but there is also an extra box highlighted at the bottom of the image which i think is the anchor which firefox element inspector shows as an anchor a width of image and height of line height. how do i get rid of this extra box or what is it ?

thanks

the html is

<div class="linkbox">
<a href="gardenbirds.html"
<img src="pics-links/dnc23011.jpg"title="Garden birds"
alt="Garden birds"class="linkpic"><a/><br> 
<a href="gardenbirds.html">&nbsp;Garden birds&nbsp;<a/> 
</div>

the css is

    .linkbox {
    text-align: center;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    text-transform: none;
    width: 170px;
    height: 175px;
    font-weight: bold;
    line-height: 20px;
    font-size: 10pt;
    }
   .linkpic {
    border: 1px solid white;
    }
    a:link {
    font-weight: bold;
    font-family: Arial,Helvetica,sans-serif;
    color: #46484e;
    text-decoration: none;
    }
    a:visited {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    color: #64666c;
    text-decoration: none;
    }
    a:hover  {
    background-color: white;
    text-decoration: none;
    }
    a:hover img { 
    border: 1px solid #46484e; 
    }

so the image is a link and the text is a link. the text hover white and the image boarder hovers black. All works ok in firefox But in IE it shows an extra white hovering area between the image and text

Upvotes: 3

Views: 921

Answers (2)

Uncoded
Uncoded

Reputation: 39

none of the above seem to work. The code causing the extra highlight area seems to be

a:hover  {
background-color: white;
text-decoration: none;
}

acting on the image anchor

Upvotes: -1

Joanvo
Joanvo

Reputation: 5817

Apply this css in your link:

a img {
  border: none;
}

Upvotes: 2

Related Questions