CODEWITHSUNDEEP
csswordpress-theminghtml-lists
gwundrig
gwundrig

Reputation: 3

Can't see numbers in ol li list

I have some numbered lists on a website with a wordpress template I'm currently developing. However, I can't see the numbers before numbered lists.

I've set list-style-type: decimal for ol > li and tried some other things, but none seemed to work.

Can somebody help me? (It's probably a really obvious mistake, but I've no more ideas how to do this)

Thanks!

Example page

Upvotes: 0

Views: 6011

Answers (5)

Darrell
Darrell

Reputation: 648

I made a little Test Page:

<html>
	<head>
		<title>Test Page</title>
	</head>
	<body>
		<ul>
			<li>ul no style</li>
			<li>test</li>
		</ul></br>
		<ul style="list-style-type: decimal">
			<li>ul with style</li>
			<li>test</li>
		</ul></br>
		<ol style="list-style-type: decimal">
			<li>ol with style</li>
			<li>test</li>
		</ol></br>
		<ol>
			<li>ol without style</li>
			<li>test</li>
		</ol>
	</body>
</html>

As you can see setting the style for an ordered list is unnecessary.

If you want the numbers you can just NOT include the style and use the <ol></ol> tags.

Upvotes: 0

Razetime
Razetime

Reputation: 216

Try this: list-style-type: decimal !important; Please Use this sparingly.

Upvotes: 0

Stewartside
Stewartside

Reputation: 20905

You do not set the list-style-type on the individual li's but on the containing ol or ul.

In your CSS, you are setting this:

.wrapper .entry-content ol {
    list-style-type: none;
    margin: 0;
}

You are also resetting the padding further down in your CSS when the list-style will need 25px of padding to the left.

Try this:

.wrapper .entry-content ol {
    list-style-type: decimal;
    margin: 0;
    padding-left: 25px;
}

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115109

You've turned then off here

.wrapper .entry-content ol {
    list-style-type: none;
}

You need to turn them back on.

.wrapper .entry-content ol {
    list-style-type: decimal;
}

Upvotes: 0

jonazz
jonazz

Reputation: 41

Try using

ul {        
 list-style-position: inside;
}

Upvotes: 0

Related Questions