Image border

  • Author
    Posts
  • #49712

    scrambled
    Member

    I think I’m just having a brain lapse, but I can’t figure out how to make my linked images NOT have the background attributed to text links.

    Text:

    .hentry a:hover {
    color:#fff;
    background:#993333;
    border:0;
    }

    Image:

    img a:hover,img a {
    background:#fff;
    }

    Doesn’t work. See this page. There is a red thing on the bottom of the linked images (when you hover over them). I don’t want this.

    Any help?

    #49903

    i don’t know how to fix it (i have the same problem on my own site). but here’s a decent workaround:
    a:hover img {
    border: #fff 5px solid;
    margin: 0px;
    }

    by replacing the 5px margin on the images with a border, the fact that the background is there becomes irrelevant. :)

    CSS purists like atthe404 will probably burn me as a heretic for this, but you know, it works.

    #49905

    cornell
    Member

    Um, you’ve set the border 0 property for the text, but not for the image a.

    img a:hover,img a {
    background:#fff;
    border: 0;
    }

    Try it, see what happens. What Adam appears to be doing is setting the border colour to the same value as the background.

    #49912

    @cornell-

    the a element doesn’t occur inside the img element, so your CSS won’t be executed.

    #49913

    cornell
    Member

    poo.

    I’m sure it’s something like that though. Hang on…

    /goes to look…

    #49914

    cornell
    Member

    You’re quite right.

    I use img a:

    For example, controlling the look of the flickr images on my site I use:

    #flickr img a:link, #flickr img a:visited {
    border:0px;
    }

    #49915

    cornell
    Member

    Well, apparently you should just ignore me altogether as I obviously have no idea what I’m talking about! The code I posted above doesn’t work on my site either.

    To be fair to me though, I changed my theme last night and then my PC crashed. :(

    #49917

    cornell-

    #flickr a:link, #flickr a:visited {}
    should work. similarly, applying a class to links with images would work, like the way the inline uploader does: a:imagelink

    #49961

    scrambled
    Member

    Thanks guys. That workaround seems to work.

The topic ‘Image border’ is closed to new replies.