CSS Ordered Lists using Right Parentheses

jagwebby

11-25-2011, 08:24 PM

Hi,

I want to be able to have an ordered list that use right parentheses instead of periods.

Here is the css I employed.

.ui-tabs-panel ol li {
list-style: none;
counter-reset: list;
}
.ui-tabs-panel ol li:before {
content: counter(list, decimal) ") ";
counter-increment: list;
font-size: 14px;
font-weight: bold;
font-family: arial;
color: #222222;

}

When I use it, the numbered list does not iterate and instead comes out as

1)
1)
1)

instead of

1)
2)
3)

Excavator

11-25-2011, 08:42 PM

Hello jagwebby,
Look at it this way -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
ol {counter-reset: item;}
ol li {
list-style: none;
}
ol li:before {
content: counter(item) ") ";
counter-increment: item;
font-size: 14px;
font-weight: bold;
font-family: arial;
color: #222222;
}

</style>
</head>
<body>
<div id="container">
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</div>
</body>
</html>

jagwebby

11-25-2011, 11:20 PM

Thanks that was a big help!