This CSS used to work with social media icons replacing list item bullets, but now it is giving me a list showing the bullets, the icons, and the text smashed together.
Why has "list-style: none;" stopped working?
.social-follow {
margin: 0.2em 0 2em 3em;
}
.social-follow ul.follow-background {
list-style: none outside !important;
margin: 0 0 0 0.6em;
padding: 0 0 0 0.6em;
overflow: hidden;
}
.social-follow ul.follow-background + li.follow {
line-height: 32;
background: no-repeat left 1px;
/** fixed vertical position **/
margin: 0.3em 0 0 -0.6em;
padding: 0 0 0 2.7em;
overflow: hidden;
}
li.follow.chapicon {
background: url('https://wdcb.stcwdc.org/wp-content/uploads/chapter_logo_54pxtype-32x32-28x28.png') no-repeat left 1px;
}
li.follow.facebookicon {
background: url('https://wdcb.stcwdc.org/wp-content/uploads/facebook-icon-28x28.png') no-repeat left 1px;
}
li.follow.flickricon {
background: url('https://wdcb.stcwdc.org/wp-content/uploads/fluid-flickr-logo-28x28.png') no-repeat left 1px;
}
li.follow.instaicon {
background: url('https://wdcb.stcwdc.org/wp-content/uploads/instagram-logo-28x28.png') no-repeat left 1px;
}
li.follow.linkedinicon {
background: url('https://wdcb.stcwdc.org/wp-content/uploads/linkedin-logo-28x28.png') no-repeat left 1px;
}
li.follow.pinteresticon {
background: url('https://wdcb.stcwdc.org/wp-content/uploads/pinterest-logo-28x28.png') no-repeat left 1px;
}
li.follow.rssblueicon {
background: url('https://wdcb.stcwdc.org/wp-content/uploads/rss-logo-blue-28x28.png') no-repeat left 1px;
}
li.follow.skylineicon {
background: url('https://wdcb.stcwdc.org/wp-content/uploads/logo-skyline_only-28x28.png') no-repeat left 1px;
}
li.follow.twittericon {
background: url('https://wdcb.stcwdc.org/wp-content/uploads/twitter-logo-28x28.png') no-repeat left 1px;
}<div class="social-follow">
<ul class="follow-background">
<li class="follow facebookicon"><a href="https://www.facebook.com/STCWDCMB/" rel="nofollow noopener noreferrer">Facebook page</a></li>
<li class="follow flickricon"><a href="https://www.flickr.com/photos/stcwdc/sets" rel="nofollow noopener noreferrer">Flickr Photo Albums</a></li>
<li class="follow instaicon"><a href="https://www.instagram.com/stc_wdcb/" rel="nofollow noopener noreferrer">Instagram</a></li>
<li class="follow linkedinicon"><a href="https://www.linkedin.com/groups?gid=156478" rel="nofollow noopener noreferrer">LinkedIn Group</a></li>
<li class="follow pinteresticon"><a href="https://www.pinterest.com/stcwdcmb/" rel="nofollow noopener noreferrer">Pinterest page</a></li>
<li class="follow twittericon"><a href="https://twitter.com/stcwdc" rel="nofollow noopener noreferrer">Twitter @stcwdc</a></li>
</ul>
</div>Current result in Opera, Firefox, Safari, and Google Chrome:
There are several problems here, but first just to note that one problem has gone away. The image in the question shows bullet symbols as well as the icons but the code as currently presented in the question does not show the bullet points. I believe this was dealt with in comments (a typo on !important).
Now there are a couple of remaining things. It is not OK to have unitless settings for line-height other than 0 (which can be unitless for most things) so this snippet applies a px which it assumes is what is wanted. [Note in the snippet in the question this would not be picked up as the class it was in was never executed, see next point. I believe some browsers may be 'kind' and assume px, but don't rely on it].
As @connexo has pointed out, there is one chunk of CSS which is never applied:
See MDN:
The li elements are children of the ul element, not siblings, so this selector is ignored.
However, in curing that problem we've uncovered another one - there is a background setting which has more specificity than another. So this one:
now overwrites this one:
Remember that background is a composite property - setting several things.
For clarity this snippet separates things out into the individual components.