Диск со списком определений не отображается

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;
}

И 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>
...

Мне нужен диск до DD, но он не отображается в Chrome или IE. Есть идеи, что я сделал не так? Спасибо!

Answer 1

Вы также можете использовать псевдоэлемент :before в CSS, чтобы вставить символ маркера перед каждым <dd> или использовать фоновое изображение на нем с маркером, который также сделает его кросс-браузерным, как: before isn не поддерживается во всех браузерах.

Answer 2

Вот демонстрация подхода Стага:

http://jsfiddle.net/snifty/eLXyu/1/

.about dt:before {
  content: "\25CF";
  font-size:x-large;
  color:maroon;    
}

.about dt {
  font-weight:bold;
}
.about dd {
  margin-left: 0px;
  padding-left: 30px;
}

Я использовал определенный символ Unicode для эмуляции диска. Псевдоэлементы way fun .

Answer 3

Я согласен со Stagas, используйте фоновое изображение на <dd> вашего определения. список. Вы не хотите добавлять специальные символы в саму разметку ... помните, держите контент отдельно от представления. Псевдоэлементы не будут отображаться в IE 7 и более ранних версиях.

Answer 4

Я считаю, что list-style-type предназначено, ну, ul/ol/li (списки). а не теги определения.

Вы должны переписать свой синтаксис, чтобы использовать список, или, возможно, добавить • (& bull;) перед определениями.