Блог

Итак, у меня есть довольно простой упорядоченный список:

 <div id="home">
...
<ol id="test">
<li>Search for and find photos of any kind of place.</li>
<li>Rate photographs, vote on the places in them, and discuss them with others.</li>
<li>Share a few photos of your own. Uploading 50 gets you a free PLUS subscription!</li>
<li class="last">Tell us what you think about the site and help us make it better.</li>
</ol>
...
</div>
  

Проблема в том, что числа не отображаются для элементов списка. Это несмотря на мой CSS:

 ol#test { display: block; list-style-type: decimal; list-style-position: inside; }
ol#test li { display: block; width: 176px; margin-right: 20px; }
  

Я даже добавил идентификатор #test в надежде, что это может быть какая-то проблема с приоритетом наследования, но это не устранило проблему.

Вот трассировка стиля от Firebug:

 div#home ol#test li {
    display: block;
    margin-right: 20px;
    width: 176px;
}
style....3308249 (line 1035)
li {
    line-height: 1.4;
}
supert...6247640 (line 40)
li {
    margin-bottom: 0.5em;
}
supert...6247640 (line 33)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
reset....7103941 (line 4)
Inherited fromol#test
div#home ol#test {
    list-style-position: inside;
    list-style-type: decimal;
}
style....3308249 (line 1031)
ol {
    list-style-type: decimal;
}
supert...6247640 (line 32)
ul, ol {
    list-style-position: outside;
}
supert...6247640 (line 30)
ol, ul {
    list-style: none outside none;
}
reset....7103941 (line 20)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
}
reset....7103941 (line 4)
Inherited fromdiv#welcome.section
div#home div.section {
    font-size: 15px;
    line-height: 20px;
}
style....3308249 (line 1011)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
}
reset....7103941 (line 4)
Inherited fromdiv#home
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
}
reset....7103941 (line 4)
Inherited fromdiv#main.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
}
reset....7103941 (line 4)
Inherited fromdiv#wrapper
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
}
reset....7103941 (line 4)
Inherited frombody.home
body {
    color: white;
    text-shadow: 0 1px #1C1D1E;
}
style....3308249 (line 731)
body {
    font: 300 13px/18px "Helvetica Neue","Helvetica","Lucida Grande",sans-serif;
}
style....3308249 (line 67)
body {
    font: 12px/18px "Helvetica Neue","Helvetica","Lucida Grande",sans-serif;
}
supert...6247640 (line 3)
body {
    line-height: 1;
}
reset....7103941 (line 17)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
}
reset....7103941 (line 4)
Inherited fromhtml.wf-ffmarketweb1ffmarketweb2-n4-active
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
}
reset....7103941 (line 4)
  

Я чего-то здесь не понимаю? По какой-то причине я не могу найти проблему. Проблема такая же в Firefox и Safari.

Спасибо!

Не устанавливайте display:block для li элемента списка.

 ol#test li { margin-right: 20px;width:140px;  padding:10px; }
  

Вот jsfiddle:

http://jsfiddle.net/naveed_ahmad/he9Nm/