Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ordered List (ol) showing up un-numbered?

Tags:

html

css

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:

  1. my text
  2. my text
  3. 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

like image 737
Abs Avatar asked Apr 15 '10 01:04

Abs


People also ask

Is Ol a numbered list?

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

How do I remove a number from OL?

Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.

What is an ordered list ol >?

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.

Does an ordered list use numbers?

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.


2 Answers

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.

like image 120
nickf Avatar answered Oct 08 '22 15:10

nickf


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.

like image 39
David Thomas Avatar answered Oct 08 '22 15:10

David Thomas