Support » Themes and Templates » stopping image having underline when a link

  • Resolved miocene22

    (@miocene22)


    I have my links styled to have dashed border when hovered in my css.

    But annoyingly this also applies to images that are links.
    I have tried:

    #content a img, #sidebar a img, a img:hover, a img:hover a, img:hover{
    	border-style: none!important;
    }

    And it seems to work in safari but not firefox and IE.

    Any suggestions on how to prevent the border on theses browsers?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Have you tried just plain a:hover{border-style:none}? Or a:hover{text-decoration:none}?

    Post your site link here. So it will be easy to debug.

    my site is snowmo.co.uk. The facebook logo is the link in question

    In response to apljdi I don’t want to do a:hover{border-style:none} as that would stop the normal text links from having underline when hovered. It’s only images I don’t want underlined

    text-decoration:none would do nothing as the underline is a border not a text underline

    Those CSS you specified wont work here because the borders appear for the link tag. The only way to make itt disappear is to edit the HTML and add a class to the link that has the image and style that class to remove the border.

    Michael

    (@alchymyth)

    Forum Moderator

    @miocene22:

    you were nearly there with your styles (in style.css). it just needed another combination:

    #content #sidebar a:hover {
    	border-bottom: none;
    }

    @alchymyth

    But that would remove the underline in those normal links as well.

    Joni

    (@jonimueller)

    Try

    #content img a:hover {
        border-bottom: none !important;
    }

    That tells the browser not to underline any image in the #content division.

    I’m not sure this works and I’m not where I can test it out right now, and really the better thing to do is to have all your links use text-decoration, rather than border. If an image has a border, which some do, especially thumbnail images in posts, this is going to wreak havoc with those borders, if I’m not mistaken. I’ll be home in about an hour. I want to see if I’m right or wrong. 🙂

    Michael

    (@alchymyth)

    Forum Moderator

    @muthukswamy: you are right – need to be more specific:

    #content #sidebar .textwidget a:hover {
    	border-bottom: none;
    }

    thanks for all the responses.

    I followed muthukswamy’s suggestion and gave the <a> tag a class and then styled the class in the stylesheet to have no border. Solved.

    Thanks again

    I was able to correct my problem with the same issue…using a little help from this forum as well some digging myself. I thought I’d post my solution here to help future stumblers…

    Issue: Blue dotted line appearing under Widget images that were also links.

    It was an easy fix. I went into the CSS of my WordPress site and scrolled down the page until I began seeing several tags starting with
    “#sidebar {“

    It looks exactly like this:

    /************************************************
    * Sidebar *
    ************************************************/

    #sidebar {
    float: right;
    width: 250px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    line-height: 18px;
    }

    #sidebar a, #sidebar a:visited {
    color: #3A87DD;
    text-decoration: none;
    border-bottom: 0px dotted #3A87DD;
    }

    #sidebar a:hover {
    color: #3A87DD;
    text-decoration: none;
    border-bottom: 0px dotted #FFFFFF;
    }

    Notice that the 2nd and 3rd code blocks include “border-bottom”. I changed it to 0px. It did say 1px. That’s it! No more blue dotted line under my sidebar widget link/images.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘stopping image having underline when a link’ is closed to new replies.