WordPress.org

Ready to get started?Download WordPress

Forums

Cannot remove img border and hover bg color from image links (8 posts)

  1. Sam
    Member
    Posted 2 years ago #

    The Share & Follow icon links as well as the Book Jacket image links that were brought in from an old Typepad blog have dotted bottom borders and background colors on hover. I have tried numerous ways to get rid of the image styling but can't seem to make it go away.

    a img {border:none; outline:none; text-decoration:none; }
    .post a img {border: 0px solid #000;}
    .post a:hover img {border-color: none;}

    http://everydayiwritethebookblog.com/
    Here is the original CSS declaration for the links I DO want to show the styles:

    /* Links */
    
    a{color:#335B60; text-decoration:none; outline:none}
    a:hover{background:#D9E9EA; color:#335b60; text-decoration:none; outline:0}
    a img, :link img, :visited img, {border:none !important; outline:none !important; text-decoration:none !important; }
    a img {border:none !important; outline:none !important; text-decoration:none !important; }

    Any suggestions?
    Thanks so much

  2. elseloop
    Member
    Posted 2 years ago #

    Looks like the dotted border is coming from

    .entry-content a { border-bottom: dotted 1px #583c7b; }

    on line 134 of your stylesheet. The background color on hover is from

    .entry-content a:hover { background: #D9E9EA; }

    on line 137.

  3. Sam
    Member
    Posted 2 years ago #

    I do want the text links in .entry-content to have these effects...So:

    .entry-content a img { border-bottom: none; }
    .entry-content a:hover img{ background: none; }?

    THANKS FOR YOUR HELP!

  4. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  5. Pankaj Pandey
    Member
    Posted 2 years ago #

    .entry-content .shareinpost a {
    border-bottom:none;
    }

    Your problem solved..

  6. Pankaj Pandey
    Member
    Posted 2 years ago #

    also add background: none;

  7. Sam
    Member
    Posted 2 years ago #

    Thank you everyone!! Pankaj--that worked for the Share & Follow icons. Thanks SO MUCH.

    But most of the images (not the first 2) within the posts and in the sidebar widgets are still showing a border bottom and background color on hover. (no border in widgets) And I just can't figure out how to get rid of them.

    .entry-content img a {
    border-bottom:none;
    }

    does nothing.
    Any suggestions greatly appreciated.

  8. Jorge
    Member
    Posted 1 year ago #

    I have the same problem at this test site here: test site

    If you hover over the images, notice how the border at the bottom displays the red line. I'm aware I've chosen this style for the regular a links across the site but I can't seem get this working at all:

    I've tried these codes to no avail

    a img {border:none; }

    a img {
    border: none !important;
    text-decoration: none !important;
    }
    .entry a img { border-bottom: none; }
    .entry a:hover img{ background: none; }

    Pretty please anyone.

Topic Closed

This topic has been closed to new replies.

About this Topic