Removing default border around an image - Chrome browser

Question

I can't believe I ran on this problem for the first time. I have searched lot of other similar question on SO regarding the same issue, but none of them worked for me.

I have a img tag with a class attribute under anchor tag.

So my html looks like:

<ul id="racing-menu" class="accordion-menu list-unstyled">
  <li>
    <a id"something" name class"something">
      <img class="icon_71">
    </a>
  </li>
</ul>

CSS

.icon_71 {
  background: url(../../cms/images/sports/something.png) no-repeat;
  width: 36px;
  height: 22px;
  margin: 0 10px 0 0;
  float: left;
}

I tried the following solutions in order to avoid default border on Chrome browser

1)border: 0 2)outline: none 3)changing img class to img id

4)Setting

a img {
  border:none
} 

a img {
  border:0
}

Answer 1

Your <img> tag does not have a src attribute since you are setting background with css.

<img class="icon_406">

This is invalid html - if you intend to implement icons through css use <span> or something similar that does not require src attribute by specification. Or load the image icons through src attribute of <img> element.

Chrome displays a border since it cannot find the image (same as if the src had a broken link inside) - but the icon shows since css is still able to apply the class styling to the empty <img> element.