CSS ul li bullet disappear [closed]

Question

ul and li in my webpage not work at all. here is my index.html

<div id="main" class="core">
    <div id="background">       
    </div>
    <div id="content">
        <div id="default"><div></div></div>
    </div>
    <div id="map" class="special"></div>

</div>

this is my page.php

// Care for the Square
case 'care-for-the-square':
    echo '
    <p>On an annual basis the Friends fund: </p>
    <ul id="test">
    <li>Landscaping</li>
    <li>Tree care</li>
    <li>Grass seeding</li>
    <li>Graffiti removal</li>
    <li>Bench repair</li>
    <li>Supplemental seasonal maintenance staff</li>
    <li>Sidewalk sweeing</li>
    <li>A dedicated park ranger</li>
    <li>Excess seasonal trash removal</li>
    <li>Holiday lights</li>
    <li>Doggie bags</li>
    </ul><br/>

    ';
    break;  

could anyone help me to figure it out ? thank you

Answer 1

It could be that the ul is set to list-style: none, although it's more likely that the bullets have disappeared because the default left margin and/or padding has been removed. As noted, you need to post your CSS too, or preferably a working example that demonstrates the issue.

EDIT: In normalize.css, line 270, you have this rule:

menu, ol, ul, li {
    padding: 0;
    list-style: none;
}

That is hiding your bullet points. You can either get rid of that second list-item rule, or override it with this:

#test li {list-style: disc;}