Need help with CSS styling for multiple lists
#basic li, #standard li, #premium li {
padding-left: 30px;
padding-top: 3px;
padding-bottom: 5px;
background-image: url(../assets/misc/blue_yes.png);
background-repeat: no-repeat;
background-position: 0 .5em;
border-bottom: 1px dotted #CCC;
}
#high li {
padding-left: 30px;
padding-top: 3px;
padding-bottom: 5px;
background-image: url(../assets/misc/green_yes.png);
background-repeat: no-repeat;
background-position: 0 .5em;
border-bottom: 1px dotted #CCC;
}
I am trying to style four separate lists but running into an issue.
<ul id="basic">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<ul id="standard">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<ul id="high">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<ul id="premium">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
The problem I'm facing is that only the first list is styled as intended with bullet images. Lists 2-4 are not displaying correctly. Any suggestions on how to ensure all four lists have the same styling?