For some reason that im not sure the that is inside the about christopher paolini's books displays using bullet points instead of the lower-roman numerals. does anyone know whats wrong?
Html
<ol class="list">
<li>Books
<ul class="list">
<li>Any thing by Mathew Riely</li>
<li&g开发者_开发百科t;Alex Rider series</li>
<li>Christopher Paolini
<ol class="list">
<li>Eragon</li>
<li>Eldest</li>
<li>Brisingr</li>
</ol>
</li>
</ul>
</li>
<li>Music
<ul class="list">
<li>Muse</li>
<li>Coldplay</li>
<li>Red</li>
<li>Radiohead</li>
</ul>
</li>
<li>Films & TV
<ul class="list">
<li>Inception</li>
<li>Serenity</li>
<li>Star Trek</li>
<li>Surrogates</li>
</ul>
</li>
</ol>
css
ul.list {
list-style-image : url('images/bpr.png');
}
ol.list {
list-style-type : lower-roman;
}
This code seems to be working just fine for me. Are you sure that your CSS is being imported?
This works in safari's code snippet editor.
<style>
ul.list {
list-style-image : url('images/bpr.png');
}
ol.list {
list-style-type : lower-roman;
}
</style>
<ol class="list">
<li>Books
<ul class="list">
<li>Any thing by Mathew Riely</li>
<li>Alex Rider series</li>
<li>Christopher Paolini
<ol class="list">
<li>Eragon</li>
<li>Eldest</li>
<li>Brisingr</li>
</ol>
</li>
</ul>
</li>
<li>Music
<ul class="list">
<li>Muse</li>
<li>Coldplay</li>
<li>Red</li>
<li>Radiohead</li>
</ul>
</li>
<li>Films & TV
<ul class="list">
<li>Inception</li>
<li>Serenity</li>
<li>Star Trek</li>
<li>Surrogates</li>
</ul>
</li>
</ol>
You can do something like this:
ul.list {
list-style-type: none;
}
ul.list li {
background : url('images/bpr.png') top left no-repeat transparent;
padding-left: 10px;
}
ol.list {
list-style-type : lower-roman;
}
This will give you the image for the normal li items and a roman count for the ol list items.
I use this method:
<ol id="list">
<li>Books
<ul>
<li>Any thing by Mathew Riely</li>
<li>Alex Rider series</li>
<li>Christopher Paolini
<ol>
<li>Eragon</li>
<li>Eldest</li>
<li>Brisingr</li>
</ol>
</li>
</ul>
</li>
<li>Music
<ul>
<li>Muse</li>
<li>Coldplay</li>
<li>Red</li>
<li>Radiohead</li>
</ul>
</li>
<li>Films & TV
<ul>
<li>Inception</li>
<li>Serenity</li>
<li>Star Trek</li>
<li>Surrogates</li>
</ul>
</li>
</ol>
with the CSS as:
#list li
{
list-style: lower-roman;
}
#list li li
{
list-style: url('images/bpr.png');
}
#list li li li
{
list-style: lower-roman;
}
精彩评论