Announcement

**mark87** · Sep 28, 2006, 05:33 PM

Nope you can only have decimal, roman, or alpha styles.

May be able to do something with a server side language such as PHP though.

**Sonjaaa** · Sep 28, 2006, 05:33 PM

Or maybe there's a tricky way to put an image over the number to put the parethesis brackets around the number, or I dunno?

**mark87** · Sep 28, 2006, 05:35 PM

You could set the background image of the <li> to some brackets, yup, that could work, but I've only ever experimented with background images for bullets etc on unordered lists with the list style set to none. Not sure if the numbers/background would appear in the correct places...

**Sonjaaa** · Sep 28, 2006, 05:36 PM

Wow, this is a serious shortcoming of CSS. You'd think it would have options to customize many things like this.

**mark87** · Sep 28, 2006, 05:43 PM

Well, I'm sure developers have more concerns than list style types...

I tested with li { background: url(brackets.png) left no-repeat; } , but it causes the background to be under the content, not the numbers.

**Sonjaaa** · Oct 2, 2006, 03:35 PM

T3h solution for now...

In the end, the best I could do was keep the <li> format, but use CSS to make the numbers/bullets dissapear in front of each <li> item. And then I typed it in manually at the beginning of each one, e.g.

<li>(1) Bla bla bla</li>

Sonja

**_Aerospace_Eng_** · Oct 2, 2006, 03:37 PM

Actually CSS does have something similar to what you are talking about but it isn't widely supported among browsers. http://www.w3schools.com/css/pr_gen_...-increment.asp
You can automate it with JS or any other server side language maybe

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#list {
margin:0;
padding:0;
list-style:none;
}
</style>
<script type="text/javascript">
function setNum()
{
	var listLi = document.getElementById('list').getElementsByTagName('li');
	for(var i = 0; i < listLi.length; i++)
	{
		var temp = listLi[i].firstChild.nodeValue;
		listLi[i].firstChild.nodeValue = '(' + i + ') ' + temp;
	}
}
window.onload = setNum;
</script>
</head>
<body>
<ol id="list">
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
</ol>
</body>
</html>

**Arbitrator** · Oct 3, 2006, 11:27 AM

The CSS 2.1 specification's Generated Content, Automatic Numbering, and Lists section explains how you would do this via CSS. The primary problem is that Internet Explorer 6 and 7 RC1 don't support the :before pseudo-element or content property; Firefox, Opera, Konquerer, and Safari have complete or near-complete support for both.

Announcement

<ol><li> with (1) (2) instead of 1. 2. ?

<ol><li> with (1) (2) instead of 1. 2. ?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment