Background image of li element not showing in firefox - html

Question

I have an html portion of code in my page that goes something like this:
<section class ="sidebar">
<ul>
<li class="facebook">Facebook</li>
<li class="linkedin">LinkedIn</li>
<li class="twitter">Twitter</li>
<li class="google-plus">Google+</li>
</ul>
</section>
And the css goes like this:
.sidebar ul {
float: left;
}
.sidebar ul li{
display: block;
width:35px;
text-indent: -9999px;
margin: 3px;
}
li.facebook{
height: 35px;
background: url(img/icon_face.png) center center no-repeat;
background-size: contain;
}
li.twitter{
height: 35px;
background: url(img/icon_twitter.png) center center no-repeat;
background-size: contain;
}
li.google-plus{
height: 35px;
background: url(img/icon_g+.png) center center no-repeat;
background-size: contain;
}
li.linkedin{
height: 35px;
background: url(img/icon_in.png) center center no-repeat;
background-size: contain;
}
What happens here is that I have 2 strange issues:
First the element li.google-plus does not show in any of the browsers. The browsers just ignore it. Here is what firebug shows:
The second is that the only image that shows in firefox is the twitter one. In chrome and opera all the other ones show correctly. As they are showing correctly in other browsers I assume the problem is not the path in the background property.
Any idea on what the problem may be?
EDIT:
Check what firebug says about the background image path:
It says that it couldn't load the given url.

Answer 1

Both in .sidebar ul li and in li.facebook,li.twitter etc. You should write width: and height: properties which You didn't set.

Answer 2

Ok, so it turns out that the problem was my AdBlock extension. After disabling it, it started working normally.
Figured it out through this answer: https://stackoverflow.com/a/466020/1235708