CODEWITHSUNDEEP
htmlcssweb
Louis Maddox
Louis Maddox

Reputation: 5576

"List-style-type decimal" giving bullet points not numbering

I have some code that I'm trying to use to mimic a blockquote tag in the style for my HTML in a certain instance.

In CSS-speak this instance is div.source ol li , and the CSS on my page is as follows (my site)

blockquote div {
    line-height:0;
    padding-top:0;
}
blockquote div p {
    line-height:1em;
}
div.source > p:first-child {
    display:inline;
}
div.source blockquote {
    margin-top:.9em;
}
div.source ol li {
    list-style-type:decimal;
}
div.source ol {
    font-family:SEGOEUIL;
    line-height:1;
    margin-top:.9em;
    font-size:130%;
    display:block;
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    -webkit-margin-start:0;
    -webkit-margin-end:0;
    background-color:0 color-stop(50%, #E0F8E0), color-stop(51%, #E6F8E0), color-stop(100%, #F5FBEF));
    background:0;
    overflow:auto;
    white-space:pre-wrap;
    border-style:solid;
    border-width:0;
    padding:0 .9em;
}
blockquote {
    overflow:hidden;
    font-family:SEGOEUIL;
    font-size:12px;
    line-height:1;
    padding-top:0;
}
body {
    font-size:70%;
    line-height:1.4;
    margin:0;
}
blockquote p, div.source ol p {
    -webkit-margin-before:0;
    -webkit-margin-after:0;
}
# blockquote p sub, div.source ol p sub {
    margin-top:-15px;
}

As you might be able to see, div.source ol behaves as if it was blockquote as far as formatting is concerned, however the <li> tag is rendering as a bullet point, and when I inspect the element it says list-style-type:decimal as it should be... Can anyone explain?

EDIT This is with list-style-position:inside as recommended by Explosion Pills enter image description here

EDIT 2 Still can only indent the first line...! http://jsfiddle.net/a6Dfh/

enter image description here

Upvotes: 0

Views: 1168

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

In fact, it's not a bullet point but the period of the decimal. The issue is that you have list-style-position: outside (the default), but the <ol> is contained by an element with overflow: hidden so you can't actually see the decimals. Try adding more padding to the <ol> or change it to list-style-position: inside, or both, to move the numbers around until they fit where you want them.

Upvotes: 1

doubleswirve
doubleswirve

Reputation: 1428

I believe you should apply the list-style-type to the ul or ol as opposed to the list items.

Here is the MDN reference.

Upvotes: 0

Related Questions