SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing link decoration from an image while still keeping a border

    I've come across a problem with the images I'm using as links.

    I want to remove the ugly blue border that naturally comes from using an <a> tag with an image ... but I still want to include a dotted right border to separate the image from the following picture.

    You can see what I mean by looking at the icons in the top right hand corner at http://www.theshortstack.co.uk

    I've tried using the following CSS:

    PHP Code:
    img.firsticon {
    padding-right5px;
    }

    img.firsticon a{
    text-decorationnone;

    It's obviously not working though.

    Would somebody be able to point out where I'm going wrong please?

    Thanks very much

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to first remove the border, and then add the left one if desired :
    Code:
    img.firsticon {
    padding-right: 5px;
    border: 0;
    }
    
    img.icons {
    border: 0;
    border-left: thin dotted #cccccc;
    padding-left: 5px;
    padding-right: 5px;
    }
    By the way, img.firsticon a is not valid, as this means an anchor element inside an image with class "firsticon"

  3. #3
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    By the way, img.firsticon a is not valid, as this means an anchor element inside an image with class "firsticon"
    So do I want it round the other way then?

    Code:
    a.firsticon img{
    
    }

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, that means an image contained within an anchor element with the class of "firsticon", which does not apply to your html either. The images in question have the classes, so can be targeted as in the code block I posted - no reference to the <a> is required.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    I always use the following to kill all image borders from the start.

    Code:
    a img {border:none}
    You can then just set what you want as you go.

    (Also remember that text-decoration is on the anchor itself and not on the image.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •