Updating an older website that contains numerous unordered lists has presented a challenge. When the padding is set to 0, the display markers on the unordered list disappear.
The root cause of this issue was traced back to the CSS setting *{padding: 0; margin: 0;}, which I have now decided to remove after reading Chris Coyier's perspective on it being "No Longer Cool."
The vanishing unordered list markers due to padding: 0 raised the curious question of why this phenomenon occurs.
To see a demonstration, visit this jsfiddle link
<div> List of Stuff:
<ul class="circle" >
<li>Apples</li>
<li>Bumblebees </li>
<li>Cats</li>
<li>Dogs</li>
</ul>
</div>
CSS:
ul {
list-style-type: none;
list-style-position: outside;
padding: 0;
margin: 0px;
}
ul li {
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
ul.disc{
list-style-type: disc;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ul.gray_quad li{
list-style-image: url("./includes/images/gray_quad.gif")
}
ul.yellow_quad li{
list-style-image: url("./includes/images/yellow_quad.gif")
}