I'm facing an issue with an HTML code snippet on my page that looks 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 accompanying CSS appears as follows:
.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;
}
There are two peculiar issues I'm encountering:
Firstly, the li.google-plus element is not displaying in any browsers. Despite including it in the code, the browsers seem to be ignoring it.
Secondly, only the Twitter icon is showing in Firefox, while all other icons appear correctly in Chrome and Opera. This leads me to believe that there may be a different underlying cause for this discrepancy beyond just the path defined in the background property.
Do you have any insights into what might be causing these problems?
EDIT:
Firebug indicates an issue with the background image path. Here's more information:
The given URL for the background image couldn't be loaded according to Firebug.