I have an ordered list (ol) on my page but the numbering is not showing up at all! I have done this:
<ol> <li>my text</li> <li>my text</li> <li>my text</li> </ol>
As I have typed the above, stackoverflow was able to render it correctly the way I wanted it to, like so:
- my text
- my text
- my text
However, this is not happening on my webpage. I am viewing this in Firefox on my localhost.
If any knows why my ol's look like ul's (i.e. no numbering) I would be grateful for help. If not, please let me know how I can achieve a numbered list using ul's.
Thanks all
The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.
Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.
The OL element defines an ordered list. The element contains one or more LI elements that define the actual items of the list. Unlike with an unordered list (UL), the items of an ordered list have a definite sequence. Items in an ordered list are numbered by the browser.
An ordered list uses numbers or some sort of notation that indicates a series of items. For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on.
It's going to be a CSS issue. CSS can change the numbering/bullet style, and even turn it off altogether. Using Firebug, inspect the element and look at the CSS styles on the right to see what styles are being applied to it. Look for one called list-style
.
While the list-style-type
is most likely the problem, especially if you've used a reset stylesheet, you might also make sure that the margin-left
/padding-left
of the list is large enough that the numbers can fit into the space.
Also, it might be worth adding list-style-position: inside;
just to see if the numbers are being generated/applied by the browser.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With