Question

For some reason, I cannot get bullets to display using the tag when I have explicitly set the display to list-item and the list-style-type to square (disc didn’t work either)

CSS:

#page1 dd
{

    display: list-item;
    list-style-type: square;
}

HTML:

      <dl>

        <dt>How does the game work? </dt>           
        <dd>It provides a process - a way to ask questions and find consensus-building answers through an interactive, web-based simulation.</dd>
        <dd>It creates a common language for discussing issues. </dd>
        <dd>It moves the conversation from an individual view to a systemic one. </dd>
      </dl>

Here is what it looks like in the browser. Any ideas as to what may be interfering with the code – in firebug it shows it to be applying correctly, but the effect is not visible.

Answer 1

You just need to give some margin for the bullets to show up:

http://jsfiddle.net/BPMWP/2/

dd {
    display: list-item;
    list-style-type: square;
    margin-left:20px;
    }

The display:list-item property doesn’t have the default css that a ul or ol would have, so it hides the bullets unless you expressly indent the items.

This was actually a huge pain to figure out. Inspecting the element here is what solved it for me. Good question!