...

View Full Version : CSS Ordered Lists using Right Parentheses



jagwebby
11-25-2011, 09: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, 09: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>
<!--end container--></div>
</body>
</html>

jagwebby
11-26-2011, 12:20 AM
Thanks that was a big help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum