border in a image link

[signo]

Hello to everybody,
I'm trying to display a border when the mouse passes over an image that
has a link.
With IE6 everything is Ok, but with Mozilla only a portion of the
border is shown.
Does anybody know the reason why?
Thanks.

<STYLE type=text/css>
#nav A:hover {border:5px solid black}
</STYLE>

<div id="nav">
<a href="http://www.indirizzo.html">
<img src="mia_immagine.jpg">
</a>
</div>

 

[Els]

With IE6 everything is Ok, but with Mozilla only a portion of the
border is shown.

#nav A:hover {border:5px solid black}

It's because you are placing a border on the <a> element, instead of
on the image.
Change your style rule to:
#nav A:hover img {border:5px solid black}

 

[Sid Ismail]

On 25 Oct 2005 04:07:44 -0700, "signo" <[email protected]>
wrote:

: Hello to everybody,
: I'm trying to display a border when the mouse passes over an image that
: has a link.
: With IE6 everything is Ok, but with Mozilla only a portion of the
: border is shown.
: Does anybody know the reason why?
: Thanks.
:
: <STYLE type=text/css>
: #nav A:hover {border:5px solid black}
: </STYLE>
:
: <div id="nav">
: <a href="http://www.indirizzo.html">
: <img src="mia_immagine.jpg">
: </a>
: </div>
:


Tr adding padding:3px in the style declaration

Sid

 

[signo]

I've found a solution: in this way it works well:

<style type="text/css">
#nav a {padding:5px; border:none; display:block; float:left}
#nav a:hover {padding:0; border:5px solid black}
#nav a img {border:none; display:block; margin:0}
</style>

<div id="nav">
<a href="http://www.indirizzo.html">
<img src="mia_immagine.jpg" /><span>Vai a indirizzo.html</span>
</div>