Definition list disc not showing up

Question

CSS:

.about dt { 
list-style-type:none;
font-weight:bold;

}
.about dd { 
list-style-type: disc;
list-style-position: outside;
margin-left: 0px;
padding-left: 30px;
}

And the html

<dl class="about">
    <dt>Current topics and titles </dt>
    <dd>Fulfilling community residents&rsquo; appetite for information about 
    popular cultural and social trends and their desires for satisfying 
    recreational experiences</dd>
...

I want a disc before the DD, but it's not showing up in Chrome or IE. Any ideas what I've done wrong? Thanks!

Answer 1

You can also use the :before pseudo-element in CSS to insert the bullet character just before every <dd> or use a background-image on it with a bullet which would also make it cross-browser as :before isn't supported in all browsers.

Answer 2

I agree with Stagas, use a background image on the <dd> of your def. list. You don't want to add special characters to the mark-up itself...remember, keep content separate from presentation. Pseudo-elements aren't going to render in IE 7 and earlier.