cssbackground-imagebulletedlist

Why did my CSS for replacing a list item bullet with a background icon stop working?

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: enter image description here

Solution

  • 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:

    .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;
}

    See MDN:

    The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

    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:

    background: no-repeat left 1px;

    now overwrites this one:

      background: url('https://wdcb.stcwdc.org/wp-content/uploads/chapter_logo_54pxtype-32x32-28x28.png') no-repeat left 1px;

    Remember that background is a composite property - setting several things.

    For clarity this snippet separates things out into the individual components.

    .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: 32px;
  background-repeat: no-repeat;
  background-position: left 1px;
  /** fixed vertical position **/
  margin: 0.3em 0 0 -0.6em;
  padding: 0 0 0 2.7em;
  overflow: hidden;
}

li.follow.chapicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/chapter_logo_54pxtype-32x32-28x28.png');
}

li.follow.facebookicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/facebook-icon-28x28.png');
}

li.follow.flickricon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/fluid-flickr-logo-28x28.png');
}

li.follow.instaicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/instagram-logo-28x28.png');
}

li.follow.linkedinicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/linkedin-logo-28x28.png');
}

li.follow.pinteresticon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/pinterest-logo-28x28.png');
}

li.follow.rssblueicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/rss-logo-blue-28x28.png');
}

li.follow.skylineicon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/logo-skyline_only-28x28.png');
}

li.follow.twittericon {
  background-image: url('https://wdcb.stcwdc.org/wp-content/uploads/twitter-logo-28x28.png');
}
    <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>