WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] stopping image having underline when a link (11 posts)

  1. miocene22
    Member
    Posted 4 years ago #

    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?

  2. s_ha_dum
    Member
    Posted 4 years ago #

    Have you tried just plain a:hover{border-style:none}? Or a:hover{text-decoration:none}?

  3. muthukswamy
    Member
    Posted 4 years ago #

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

  4. miocene22
    Member
    Posted 4 years ago #

    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

  5. muthukswamy
    Member
    Posted 4 years ago #

    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.

  6. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    @miocene22:

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

    #content #sidebar a:hover {
    	border-bottom: none;
    }
  7. muthukswamy
    Member
    Posted 4 years ago #

    @alchymyth

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

  8. Joni
    Member
    Posted 4 years ago #

    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. :)

  9. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

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

    #content #sidebar .textwidget a:hover {
    	border-bottom: none;
    }
  10. miocene22
    Member
    Posted 4 years ago #

    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

  11. ibsmithme
    Member
    Posted 4 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags