chrome/safari display border around image

Question

Chrome and Safari are displaying a border around the image, but I don\'t want one. There is no border in Mozilla. I\'ve looked through the CSS and HTML, and I can\'t find an

Answer 1

This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.

Answer 2

Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.

Answer 3

.related_photo {
   content: '';
}

Answer 4

img.related_photo {
  width: 80px;
  height: 60px;
  **border: solid thin #DFDFDF;** //just remove this line
  margin-right: 3px;
  float: left;
  overflow: hidden;
}

Answer 5

I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel

<img class="related_photo"
     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

This works for me.