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

In response to your code edit (which makes both answers provided so far irrelevant): is this border "dotted"? — thirtydot, Jan 20 '11 at 03:36
nope, just a solid thin border. It's not black though, its a lightish grey — golf_nut, Jan 20 '11 at 03:37
If your code is as you say it is (complete with `border: none;`), then I can't see what the problem could be. Are you sure you aren't using some old cached version? — thirtydot, Jan 20 '11 at 03:45
This shouldn't matter, but you're missing a space between the quote and the word `class`. In other words `` should be `` — Jared, Jan 20 '11 at 03:58
Have you tried it with a `src` in the `` tag? I fired up a test.html in chrome and with an image it looks fine. Without the `src` though it shows a white box with a gray border. I believe your answer lies below (see sarcastyx). — Brett Pontarelli, Jan 20 '11 at 04:58

score 44 · Accepted Answer · answered Jan 20 '11 at 04:08

44

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.

answered Jan 20 '11 at 04:08

sarcastyx

2,219
17
16

1

I'm with a similar problem, I'm using a sprite with background-position and background-image. If I remove the width and the height, the image just vanish. – Michel Ayres Jan 08 '13 at 14:48
1

@MichelAyres for a sprite you will need to give it a height and width and will need to look at the code to figure out what is happening. I would recommend asking your own question and posting the defective code so that we can give you more help with this. – sarcastyx Jan 08 '13 at 23:10
1

rparree's solution is very elegant if you really don't want it to have a src with your image. The other option is to use a div element instead of src and then set the CSS "display" to "inline-block" – Shaun314 Jul 24 '15 at 00:15
1

@MichelAyres Any fix incase of sprite ? – NeiL Sep 09 '15 at 10:30

score 13 · Answer 2 · answered Nov 16 '12 at 11:03

13

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

answered Nov 16 '12 at 11:03

Gonzalo

151
1
4

raphaëλ · Answer 3 · 2016-07-26T13:25:54.953

7

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.

edited Jul 26 '16 at 13:25

answered Feb 25 '15 at 07:40

raphaëλ

6,393
2
29
35

score 6 · Answer 4 · answered Oct 17 '14 at 16:18

6

.related_photo {
   content: '';
}

answered Oct 17 '14 at 16:18

Andrii Katsiubka

61
1
3

1

This [removes the border](http://jsfiddle.net/sdhmpjy7/) in Chrome and Safari. A little explanation would be helpful, though. – showdev Oct 17 '14 at 17:54
4

Though content: ' '; hides the borders when the image is not loaded but when the image is loaded, it hides the image too! So, this is not a solution. – Ifti Mahmud Jan 17 '15 at 12:18
@Andrii Katsiubka this is quite awesome trick but I don't understand why content do that ... Anyway is better to apply this property only for nor src attribute image like using a css selector like img :not([src]){ content: ' ' } – BurebistaRuler May 07 '15 at 06:00

score 3 · Answer 5 · answered Nov 24 '12 at 17:03

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.

score 3 · Answer 6 · answered Feb 10 '15 at 13:53

3

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

answered Feb 10 '15 at 13:53

Ben

31
1

3

Some description usually helps. – Halvor Holsten Strand Feb 10 '15 at 14:16

score 2 · Answer 7 · answered Aug 01 '21 at 21:56

Lazy image solution (`img loading="lazy"`)

If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.

You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.

Why?

Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.

Soution 1:

Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.

I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.

Solution 2:

Detect when the image has finished loading loaded and then fade it in.

img.setAttribute('imageLoaded', 'false');
img.onload = () => 
{
   img.setAttribute('imageLoaded', 'true');
};

Then with css hide the image until it's loaded, after which it fades in nicely:

img
{
    opacity: 1;
    transition: opacity .5s;
}

img[imageLoaded='false'] 
{
    opacity: 0;  // hide image including gray outline
}

Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.

David Cook · Answer 8 · 2013-10-29T03:28:16.910

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.

score 0 · Answer 9 · edited Jul 02 '15 at 16:33

0

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.

edited Jul 02 '15 at 16:33

Cthulhu

5,095
7
46
58

answered Jul 02 '15 at 15:30

Sebas Palacio Florez

31
2

score 0 · Answer 10 · answered Aug 18 '16 at 17:29

0

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

answered Aug 18 '16 at 17:29

seca400

1

score 0 · Answer 11 · answered Jan 20 '11 at 03:21

0

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

answered Jan 20 '11 at 03:21

maga

720
3
13

Sorry, I copied some old code before. Here is the code that is giving me trouble – golf_nut Jan 20 '11 at 03:31

score 0 · Answer 12 · answered Jan 20 '11 at 03:28

0

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

answered Jan 20 '11 at 03:28

thirtydot

224,678
48
389
349

1

While `border: 0` technically works, the correct way to do it is with `border: none` because `border: 0` implies that there is still a border, but it's width just happens to be 0 so you don't see it. – Jared Jan 20 '11 at 04:00
2

@Jared: [Same difference?](http://stackoverflow.com/questions/2922909/should-i-use-border-none-or-border-0) – thirtydot Jan 20 '11 at 04:01

chrome/safari display border around image

12 Answers12

Lazy image solution (`img loading="lazy"`)

Linked

chrome/safari display border around image

12 Answers12

Lazy image solution (img loading="lazy")

Linked

Lazy image solution (`img loading="lazy"`)