Remove underline from image links (CSS)

Discussion in 'HTML' started by pepito3@gmail.com, Jul 4, 2006.

  1. Guest

    Hello, I have the following CSS rule to underline my way

    a {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    }

    But I want images not to have a dotted underline (just nothing) and I
    don't know how to do it.

    I have tried the following:

    a img {
    border-bottom-style: none;
    border-bottom-width: 0px;
    }

    ....and...

    ..without_u {
    border-bottom-style: none;
    border-bottom-width: 0px;
    }

    <a class="without_u" ...> <img class="without_u" ... /> </a>

    But nothing works! It seems like border-botton-style property in 'a' is
    always on. It is very weird because If I write:

    a img {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    }

    images get double underline!

    Any suggestions? Thanks!!
     
    , Jul 4, 2006
    #1
    1. Advertising

  2. Rik Guest

    wrote:
    > Hello, I have the following CSS rule to underline my way
    >
    > a {
    > border-bottom-style: dotted;
    > border-bottom-width: 1px;
    > }
    >
    > But I want images not to have a dotted underline (just nothing) and I
    > don't know how to do it.
    >
    > I have tried the following:
    >
    > a img {
    > border-bottom-style: none;
    > border-bottom-width: 0px;
    > }


    Here you say the img contained in an a should not have a border, the "a"
    still has one.

    > .without_u {
    > border-bottom-style: none;
    > border-bottom-width: 0px;
    > }
    >
    > <a class="without_u" ...> <img class="without_u" ... /> </a>


    ..without_u{
    border:none;
    }
    Works here in both Opera and MSIE, you don't need the class on the image.

    Grtz,
    --
    Rik Wasmus
     
    Rik, Jul 4, 2006
    #2
    1. Advertising

  3. dorayme Guest

    In article
    <>,
    wrote:

    > But nothing works! It seems like border-botton-style property in 'a' is
    > always on. It is very weird because If I write:
    >
    > a img {
    > border-bottom-style: dotted;
    > border-bottom-width: 1px;
    > }
    >
    > images get double underline!
    >
    > Any suggestions? Thanks!!


    What is "on" by default is text-decoration: underline; You turn
    this off by text-decoration: none; That is one thing. The other
    thing is the border. You turn this off by border: none; You need
    to deal with these two things separately.

    --
    dorayme
     
    dorayme, Jul 4, 2006
    #3
  4. Guest


    > What is "on" by default is text-decoration: underline; You turn
    > this off by text-decoration: none; That is one thing. The other
    > thing is the border. You turn this off by border: none; You need
    > to deal with these two things separately.
    >
    > --
    > dorayme


    This doesn't work either:

    a img {

    border-bottom-style:none;
    border-bottom-width:0px;
    text-decoration: none;
    border:none;
    }
     
    , Jul 4, 2006
    #4
  5. Frank Olieu Guest

    wrote in news:1152034495.324107.12100
    @p79g2000cwp.googlegroups.com:

    > <a class="without_u" ...> <img class="without_u" ... /> </a>


    remove the spaces between your <a> and <img> tags:
    <a ...><img ...></a>
    (assuming you have no text either)

    --
    Venlig hilsen | Kind regards | Cordialement
    Frank
     
    Frank Olieu, Jul 5, 2006
    #5
  6. <> scripsit:

    > Hello, I have the following CSS rule to underline my way


    Remove it. And I mean your CSS code, not the underline.

    The underline is a vital usability and accessibility issue. Don't mess up
    with it. A dotted bottom border is poor surrogate for a link underline and
    will often be misunderstood as something else as a link indicator.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jul 5, 2006
    #6
  7. wrote:
    >> What is "on" by default is text-decoration: underline; You turn
    >> this off by text-decoration: none; That is one thing. The other
    >> thing is the border. You turn this off by border: none; You need
    >> to deal with these two things separately.
    >>
    >> --
    >> dorayme

    >
    > This doesn't work either:
    >
    > a img {
    >
    > border-bottom-style:none;
    > border-bottom-width:0px;
    > text-decoration: none;
    > border:none;
    > }
    >


    The text-decoration is on the A element not the IMG, border on the IMG

    A.without_u { text-decoration: none; }
    A IMG { border: 0; }


    <a class="without_u" href="whatever.html"><img src="some.jpg" alt="click
    me"></a>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 5, 2006
    #7
  8. forexad

    Joined:
    May 21, 2011
    Messages:
    1
    Location:
    London
    This code works

    Thank you guys. I was looking for the code for one hour and could not find. But here it is and it works. Thank you all, it helped me to sort the problem.
    The other thing is when I removed attributes from one menu - it disappeared from the other as well (I got two menus on one page) and php for any reason changes all attributes on one page even when I assigned separate classess.


    -------
    The page I am working on now:
    OptionFair: Money Web Trader
     
    forexad, May 21, 2011
    #8
    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. KatB
    Replies:
    4
    Views:
    19,060
    prashant205
    Aug 24, 2007
  2. Larry Webb
    Replies:
    2
    Views:
    1,165
    Larry Webb
    Oct 28, 2004
  3. Steve Greenaway

    css image link border and underline

    Steve Greenaway, Feb 8, 2005, in forum: HTML
    Replies:
    6
    Views:
    8,384
    Steve Greenaway
    Feb 8, 2005
  4. Øyvind Granberg

    Image links underline not

    Øyvind Granberg, Oct 17, 2008, in forum: HTML
    Replies:
    3
    Views:
    1,209
  5. Ed

    remove underline from links

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

Share This Page