border in a image link

Discussion in 'HTML' started by signo, Oct 25, 2005.

  1. signo

    signo Guest

    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>
     
    signo, Oct 25, 2005
    #1
    1. Advertising

  2. signo

    Els Guest

    signo wrote:

    > 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}

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Oct 25, 2005
    #2
    1. Advertising

  3. signo

    Sid Ismail Guest

    On 25 Oct 2005 04:07:44 -0700, "signo" <>
    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
     
    Sid Ismail, Oct 25, 2005
    #3
  4. signo

    signo Guest

    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>
     
    signo, Oct 26, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,264
    tshad
    Jan 31, 2005
  2. Steve Greenaway

    css image link border and underline

    Steve Greenaway, Feb 8, 2005, in forum: HTML
    Replies:
    6
    Views:
    8,370
    Steve Greenaway
    Feb 8, 2005
  3. Replies:
    23
    Views:
    963
    Neredbojias
    Mar 28, 2006
  4. Volter

    image as link in border

    Volter, May 23, 2006, in forum: HTML
    Replies:
    5
    Views:
    407
    Jonathan N. Little
    May 23, 2006
  5. phl
    Replies:
    1
    Views:
    4,351
    Martin Jay
    Jun 8, 2006
Loading...

Share This Page