0

I have a sprites like this:

enter image description here

and display using the following css:

.sprite { background: url('sprite.png') no-repeat top left; width: 40px; height: 40px;  } 
.sprite.Live { background-position: 0px 0px;  } 
.sprite.Private { background-position: -50px 0px;  } 
.sprite.Public { background-position: -100px 0px;  }

But there is always a border around the image. I make sure the img {border:0} is set. I am using Bootstrap 3. Is this caused by bootstrap?

enter image description here

Rob J
  • 6,609
  • 5
  • 28
  • 29
angelokh
  • 9,426
  • 9
  • 69
  • 139
  • Why don't you utilize Firebug to see what CSS definition is causing this? I think this is not part of bootstrap! Inspect the cascade with Firebug: https://getfirebug.com/css – Henry Ruhs Oct 25 '14 at 00:30
  • @redaxmedia I use Chrome developer tool. Border set to 0. So I'm not sure who added the border. – angelokh Oct 25 '14 at 00:47
  • Here comes my personal pro-tip if nothing helps 1. find the declaration first using * {border: 0; margin: 0; etc.} and if this worked 2. find the related tag or class - good luck – Henry Ruhs Oct 25 '14 at 00:51
  • It's possible that there is another declaration that is longer than yours and match your icons. If so, your declaration will not change anything until you do !important on rules. It's also possible that not your .sprite have border but something that .spirite is inside. Would be great if you supply any working example. – Adam Pietrasiak Oct 25 '14 at 13:28

1 Answers1

1

It turns out its Chrome's issue. Here is the closest answer I can find.

It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.

https://stackoverflow.com/a/9173082/772481

Community
  • 1
  • 1
angelokh
  • 9,426
  • 9
  • 69
  • 139