Numbers in Ordered List won't render
So, I have a pretty simple ordered list:
<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>
The problem is, the numbers aren't rendering for the list items. This despite my CSS:
ol#test { display: block; list-style-type: decimal; list-style-position: inside; }
ol#test li { display: block; width: 176px; margin-right: 20px; }
I even added the #test id with hopes that it might be an inheritance priority issue of some kind, but that hasn't fixed the issue.
Here's the style trace from Firebug:
开发者_Go百科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)
Is there something I'm missing here? For whatever reason I can't seem to find the problem. The issue is the same in Firefox and Safari.
Thanks!
Don't set display:block
for the li
list item.
ol#test li { margin-right: 20px;width:140px; padding:10px; }
Here is the jsfiddle:
http://jsfiddle.net/naveed_ahmad/he9Nm/
精彩评论