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 anything that is fixing it.

Here is the code:

<tr>
  <td class="near">
    <a href="../index.html"class="near_place">
      <img class="related_photo" />
      <h4 class="nearby"> adfadfad </h4>
      <span class="related_info">asdfadfadfaf</span>
    </a>
    ...

CSS:

a.near_place {
    border: none;
    background: #fff;
    display: block;
}

a.near_place:hover{
    background-color: #F5F5F5;
}

h4.nearby {
    height: auto;
    width: inherit;
    margin-top: -2px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    display: inline;
}

img.related_photo {
    width: 80px;
    height: 60px;
    border: none;
    margin-right: 3px;
    float: left;
    overflow: hidden;
}

span.related_info {
    width: inherit;
    height: 48px;
    font-size: 11px;
    color: #666;
    display: block;
}


td.near {
    width: 25%;
    height: 70px;
    background: #FFF;

}

Sorry, I copied some old code before. Here is the code that is giving me trouble

Thanks in advance

Answer 1

Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.

Answer 2

sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.

If you want a icon of 36x36, you can set width and height to 0 and pading:18px

Answer 3

.related_photo {
   content: '';
}

Answer 4

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.

Answer 5

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 6

img[src=""]{
    content: "";
}

Answer 7

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

Answer 8

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

Answer 9

I have fixed this issue with:

<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">

The right: 15px is where you want the image to be shown, but you can place it where you want.

Answer 10

I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop. Worked like a charm no borders

Answer 11

To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:

• Use a different tag that doesn't have this behaviour. (Thanks @Druvision)
  Eg: div or span.
  Sad face: it's not quite as semantic.

• Use padding to define the dimensions. (Thanks @Gonzalo)
  Eg padding: 16px 10px 1px; replaces width:20px; height:17px;
  Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like @Gonalo's example.