Grow your CSS skills. Land your dream job.

alternative links border-bottom and images…

  • # June 15, 2009 at 6:11 am

    Hello everyone,
    I’m using this technique from a long time and always wondering how to get rid of the remaining border-bottom on the images, which are links:
    example

    Code:
    a:link {
    background: inherit;
    color: #cf432e;
    text-decoration: none;
    border-bottom: 1px solid #cf432e;
    padding-bottom: .1em;
    line-height: 140%;
    }

    and I don;t want this to affect the image, where I have:

    Code:

    any ideas ?

    # June 15, 2009 at 10:00 am

    Not entirely certain what you need here, so forgive me if I’m wrong, but if it’s a case that you just don’t want any link decoration on an image, just put this in your CSS:

    Code:
    a { outline: none; text-decoration: none; }
    a img { border: none; background: none; }

    That’ll remove any borders or backgrounds placed by default by the browser to any image acting as a link. (The first line is to remove decoration from regualr links) You can still style individual images if you give them an ID…

    # June 16, 2009 at 11:28 am

    I’m trying to remove the border style from the images, which are inside A tag

    in your example you’ll remove the border from the img tag, but with a {border-bottom: 1px solid #FFF000} you actually applying the border to a A element, which is the parent element in above example

    # June 16, 2009 at 11:51 am

    Give all of your links with an image a class.
    eg.

    Code:

    and remove the border via that class

    Code:
    a.image {
    border: none;
    }
    # June 19, 2009 at 4:55 am

    Try this

    a.image {
    border: 0px;
    }

    # June 19, 2009 at 5:21 pm
    "kamil" wrote:
    Try this

    a.image {
    border: 0px;
    }

    This would not work. The only way that would work is if you <a> had a class of "image". <a class="image">

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

You must be logged in to reply to this topic.

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