Grow your CSS skills. Land your dream job.

[Solved] Remove Border from an Image

  • # November 18, 2009 at 11:48 am

    I seem to be having problems removing the border from an image that’s an anchor link. I have not had trouble with this a lot in the past, it is kinda frustrating.

    Here is the CSS for my anchor links:

    Code:
    a {text-decoration:none; color:#000; border-bottom:1px solid #508181}

    And this for trying to remove the border from the image:

    Code:
    img{border:none;}

    With this styling, there is still a border under the images that are links.
    Any ideas on how to fix that?

    # November 18, 2009 at 12:37 pm

    Here you go:

    Code:
    a img, :link img, :visited img {
    border: 0;
    }
    # November 18, 2009 at 11:23 pm
    "apostrophe" wrote:
    Here you go:

    Code:
    a img, :link img, :visited img {
    border: 0;
    }

    Drat! It didn’t work. :? I don’t know why, it should have. Any other ideas.

    # November 19, 2009 at 2:56 am

    a img, a:link img, a:visited img {
    border: 0;
    }

    Give that a go instead.

    # November 19, 2009 at 5:07 pm
    "TheDoc" wrote:
    a img, a:link img, a:visited img {
    border: 0;
    }

    Give that a go instead.

    Nope. Still didn’t work. Bummer.

    # November 20, 2009 at 6:05 am

    You’re obviously overriding it somewhere else in the cascade. Can you post a link?

    # November 20, 2009 at 10:48 pm

    The Link: http://thomaslattimore.com
    The border is under the "Coming soon" image. It is almost unnoticeable in this case do to the paragraph bellow it. But as images are added to other places on the site, the border will be more noticeable.
    I am almost positive it is not being overwritten by a style later on in the sheet. It is not a very big CSS file, only about 90 lines, and I have done I search for "a" in it and have found nothing substantial.

    One of the weirdest things is that when the image is inspected with firebug, it states there is a selector and syntax applied to it as follows:

    Code:
    a img, a:link img, a:visited img {
    border:0 none;
    }

    Yet, there is still a border under the image?

    # November 20, 2009 at 11:47 pm

    I see it (in IE7), but it’s not a border, it’s an underline.

    Try adding this to your above css:

    text-decoration: none;

    # November 21, 2009 at 10:27 am
    "AshtonSanders" wrote:
    I see it (in IE7), but it’s not a border, it’s an underline.

    Try adding this to your above css:

    text-decoration: none;

    Deceleration added. Border still there.

    # November 21, 2009 at 11:29 am

    It’s not actually showing in firefox but I’ve had a look in ie7 with IENetrenderer and I reckon it’s inheriting this rule:

    Code:
    a {
    border-bottom:1px solid #508181;
    color:#000000;
    font-size:inherit;
    text-decoration:none;
    }

    So how about getting rid of that bottom border on all the anchors and then make it more specific?

    Code:
    a {
    color:#000000;
    font-size:inherit;
    text-decoration:none;
    }
    div.content p a {
    border-bottom:1px solid #508181;
    }
    # November 21, 2009 at 10:15 pm

    That fixed it! Thanks!! ;)

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".