Image border

• 

  scrambled · Member · Jan 15, 2007 at 11:06 pm

  • Copy link
  • Add topic to favorites

  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?

• 

  sunburntkamel · Member · Jan 16, 2007 at 1:16 pm

  • Copy link

  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.

• 

  cornell · Member · Jan 16, 2007 at 1:32 pm

  • Copy link

  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.

• 

  sunburntkamel · Member · Jan 16, 2007 at 2:46 pm

  • Copy link

  @cornell-

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

• 

  cornell · Member · Jan 16, 2007 at 2:52 pm

  • Copy link

  poo.

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

  /goes to look…

• 

  cornell · Member · Jan 16, 2007 at 2:55 pm

  • Copy link

  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;
}

• 

  cornell · Member · Jan 16, 2007 at 2:59 pm

  • Copy link

  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. :(

• 

  sunburntkamel · Member · Jan 16, 2007 at 3:43 pm

  • Copy link

  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

• 

  scrambled · Member · Jan 16, 2007 at 10:46 pm

  • Copy link

  Thanks guys. That workaround seems to work.