Image links underline not

Discussion in 'HTML' started by Øyvind Granberg, Oct 17, 2008.

  1. Hi...

    I do not want my linking images to be underlined like my text links are.
    Links are in a css-file given a red dotted underline.
    The links properties in the css-file is like this:
    /* Links properties */
    a{
    color: white;
    text-decoration: none;
    }

    a:link{
    color: white;
    text-decoration: none;
    }

    a:visited{
    color: white;
    text-decoration: none;
    }

    a:hover{
    color: white;
    border-bottom:#FF0000 1px dotted;

    }

    In the same css-file I have:

    a img {border: none; }

    td img {display: block;}

    The latter makes the trick in FF3, but in IE8 i do not work at all.
    A dotted line is still emerging during hovering of the mouse.


    I have tried:
    /* this targets specific images that are linked, ex: <a class="noborder"
    href="#"><img ></a> */
    a.noborder img {
    border: none;
    }

    I have tried everything, exept kicking the left rear tire of my SUV.

    The page I refer to is at www.tresfjording.com and I'm talking about the
    image to the left with my face and the three oval buttons to the right. In
    IE8 the red dotted line is popping up.

    The "border: 0px;" parameter is only to take away all borders around a image
    containing a link.
    How in all gods names can I overrule the css-file setting when it comes to
    images with a link?

    --


    Zadig Galbaras
    (nick)
    www.tresfjording.com
    Øyvind Granberg, Oct 17, 2008
    #1
    1. Advertising

  2. Øyvind Granberg

    Els Guest

    Øyvind Granberg wrote:

    > a:hover{
    > color: white;
    > border-bottom:#FF0000 1px dotted;
    > }


    > a img {border: none; }


    > The latter makes the trick in FF3, but in IE8 i do not work at all.
    > A dotted line is still emerging during hovering of the mouse.


    The dotted border is on the <a> element, so taking out the border of
    the image inside the <a> element, would not have any effect.

    > a.noborder img {
    > border: none;
    > }


    Try a.noborder{border:none;}

    > I have tried everything, exept kicking the left rear tire of my SUV.


    :)

    > The page I refer to is at www.tresfjording.com and I'm talking about the
    > image to the left with my face and the three oval buttons to the right. In
    > IE8 the red dotted line is popping up.


    Sorry, I don't have IE8 atm.

    However, looking in Firefox, if I set a thick border on all sides of
    the <a> element that surrounds the picture on the left, I see the
    colour of that border only to the top left of the image.
    This is because the <a> element is 'inline', and the image has
    display:block. If you make the these images inline, you'll see the
    dotted border below it in Firefox as well. IE8 just responds different
    to the image being display block than the other browsers do
    apparently.

    > The "border: 0px;" parameter is only to take away all borders around a image
    > containing a link.
    > How in all gods names can I overrule the css-file setting when it comes to
    > images with a link?


    As long as you put a dotted border on the <a> element, you will see
    it, until you stop it. This is separate from the border on the image.
    Try it out by setting a blue border on the image. Now you'll probably
    see two borders - one blue (probably surrounding the image), and one
    red dotted below it.

    --
    Els http://locusmeus.com/
    Els, Oct 17, 2008
    #2
    1. Advertising

  3. Øyvind Granberg

    Andy Guest

    "Øyvind Granberg" <> wrote in message
    news:48f91358$...
    > Hi...
    >
    > I do not want my linking images to be underlined like my text links are.
    > Links are in a css-file given a red dotted underline.
    > The links properties in the css-file is like this:
    > /* Links properties */
    > a{
    > color: white;
    > text-decoration: none;
    > }
    >
    > a:link{
    > color: white;
    > text-decoration: none;
    > }
    >
    > a:visited{
    > color: white;
    > text-decoration: none;
    > }
    >
    > a:hover{
    > color: white;
    > border-bottom:#FF0000 1px dotted;
    >
    > }
    >
    > In the same css-file I have:
    >
    > a img {border: none; }
    >
    > td img {display: block;}
    >
    > The latter makes the trick in FF3, but in IE8 i do not work at all.
    > A dotted line is still emerging during hovering of the mouse.
    >
    >
    > I have tried:
    > /* this targets specific images that are linked, ex: <a class="noborder"
    > href="#"><img ></a> */
    > a.noborder img {
    > border: none;
    > }
    >
    > I have tried everything, exept kicking the left rear tire of my SUV.
    >
    > The page I refer to is at www.tresfjording.com and I'm talking about the
    > image to the left with my face and the three oval buttons to the right. In
    > IE8 the red dotted line is popping up.
    >
    > The "border: 0px;" parameter is only to take away all borders around a
    > image containing a link.
    > How in all gods names can I overrule the css-file setting when it comes to
    > images with a link?
    >
    > --
    >
    >
    > Zadig Galbaras
    > (nick)
    > www.tresfjording.com


    Hi Zadig,

    First add a "no-border" <a> class to you stylesheet...

    <style>
    a:link.no_border {color: white; text-decoration: none;}
    a:visited.no_border {color: white; text-decoration: none;}
    a:active.no_border {color: white; text-decoration: none;}
    a:hover.no_border {color: white; text-decoration: none;}
    </style>

    .... then use that class for the image <a> tag...

    <a href="http://www.tresfjording.com/index.htm" class="no_border"
    target="_parent" style="border:none" onmouseout="MM_swapImgRestore()"
    onmouseover="MM_swapImage('Image5','','images/me_trsp.png',1)"><img
    src="images/me_sketch_mr_r.png" name="Image5" width="82" height="100"
    border="0" id="Image5" /></a>

    eg:

    <a href=http://www.tresfjording.com/index.htm class="no_border"><img></a>


    Hope this fixes your issue


    Andy
    Andy, Oct 18, 2008
    #3
  4. Øyvind Granberg

    Els Guest

    Ben C wrote:
    > On 2008-10-17, Els <> wrote:
    >> Øyvind Granberg wrote:
    >>
    >>> The latter makes the trick in FF3, but in IE8 i do not work at all.
    >>> A dotted line is still emerging during hovering of the mouse.


    > I think that dotted thing might actually be an outline (coming from
    > Firefox's default stylesheet) not a border, so
    >
    > a.noborder {outline:none}
    >
    > might work better.


    ITYM IE8's default stylesheet, but you could well be right about this.
    I misread "a dotted line is still emerging", as "the red dotted
    underline is still emerging".

    --
    Els http://locusmeus.com/
    Els, Oct 18, 2008
    #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. sunil
    Replies:
    1
    Views:
    415
    Nicolas LeBlanc
    Jul 15, 2003
  2. Jag
    Replies:
    2
    Views:
    8,376
    Randy Rahbar
    Nov 14, 2003
  3. Steve Greenaway

    css image link border and underline

    Steve Greenaway, Feb 8, 2005, in forum: HTML
    Replies:
    6
    Views:
    8,347
    Steve Greenaway
    Feb 8, 2005
  4. Replies:
    7
    Views:
    34,826
    forexad
    May 21, 2011
  5. Ed

    remove underline from links

    Ed, Oct 3, 2003, in forum: Javascript
    Replies:
    2
    Views:
    130
    David Dorward
    Oct 3, 2003
Loading...

Share This Page