How list with single bullet on one item only?

The best way to described what I want to do in HTML is by example: In Firefox you can click
View | Character Encoding | Auto-Detect

That brings up a side list of several items. Only one of those items has a solid dot next to it that shows it is the selected item. You can click to change which item has the bullet next to it. I want to know how do the same thing with HTML, CSS, and Javascript.

It is easy enough to pop up lists. The problem comes from having only one item with a style and other items with other styles. I've coded up a bunch of li items I've also tried it with div and
display: list-item;
list-style-type:disc;
in one CSS entry (called itemselected) and then another CSS entry with
display: list-item;
list-style-type:none;
called itemnotselected in all the other items. I use Javascript click events to change which item has the class="itemselected" and make all the other items have class="itemnotselected".

I've also tried showing the dot with
list-style-image: url(images/dot.gif) ! important;

My problems are with:
- getting the dot onto the left of the text description of a single item,
- align the dot vertically with the text description,
- get all other row text descriptions aligned the same vertically.
- Getting the dot within the colored background box that has the text description from within the a tag.

I'm using an a tag within an li (or within div on some variations I've tried) in order to get the onclick. That works. My Javascript executes and changes which elements have which classes assigned to them. My problem is in layout appearances. I'm testing with IE 7, latest Firefox, Seamonkey, Safari. All have similar problems but IE is worse than the others.

Here's part of the CSS. Note that part of it is commented out since it represents different ways I've tried to make it work. Basically, on a click I just change which li or div (and which a element within them) has the itemselected or itemnotselected.

li.itemselected, a.itemselected, div.itemselected
{
display: list-item;
list-style-type:disc;
/* background-image: url(images/dot.gif); */
/* background-image: url(images/arrow.png); */
list-style-image: url(images/dot.gif) ! important;
/*list-style-image: none; */
/*list-style-position:inside;*/
background-repeat: no-repeat;
/*padding-left:6px; */
margin-left: 15px;
/*background-position: 0 .5em; */
background-position: left center;
/*background-color: #b041d3;*/
background: #b041d3 none;
font-size: 9pt;
z-index:4;

}

/*

li.itemselected li:before {
background: #b041d3 none ! important;
padding-left:6px;
margin-left: 15px;
content: "\00BB \0020";
z-index:4;
}

li.itemnotselected li:before {
background: #b041d3 none ! important;
padding-left:6px;
margin-left: 15px;
content: "▶ \0020";
z-index:4;
}
*/


li.itemnotselected, a.itemnotselected, div.itemnotselected
{
display: list-item;
list-style-type:square;
/*list-style-type: none; */
/*border-left-width:thick;*/
/*padding-left:6px; */
margin-left: 15px;
/*background-position: 0 .5em; */
background-position: left center;
/*color: #746C19;*/
background-color: #f0e1a3 ! important;
font-size: 9pt;
z-index:4;

}

If your javascript is working and the classes are getting changed, then why not apply a different background image to the different classes.

Eg:
li.itemselected {background:url(background_with_dot.jpg); }

li.itemnotselected {background:url(background_without_dot); }

Fisher, If I took your approach I would need to make the entire background a fixed size? The advantage of using just a dot and then placing the text to the right of it is that I can easily change what text is in the list and not worry that the background might be too small for a longer line of text in a new entry.

My problems are all in offsets in formatting. I understand Javascript very well, CSS not so much.

Can you suggest any tools that make CSS debugging easier to do?

I was learning about li images the other day and this link was helpful.
http://www.echoecho.com/csslists.htm

i think your syntax is wrong
list-style:none is correct
but I don't think
list-style-image:none is correct

Fisher, If I took your approach I would need to make the entire background a fixed size?

No, you would just set the background to no-repeat. It would show one dot on the left.

Anyway, if you want to do it with actual bullets, try this:

<!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">
#nav ul, #nav li {
list-style-type:none;
display:list-item;
}
#nav li.selected {
list-style-type:square;
}
#nav a {
text-decoration:none;
font-weight:bold;
}
#nav a:hover {
color:#ff0;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li class="selected"><a href="index.html">Page 1</a></li>
<li><a href="index.html">Page 2</a></li>
<li><a href="index.html">Page 3</a></li>
<li><a href="index.html">Page 4</a></li>
</ul>
</body>
</html>

here's a script to change all the li tag to list-style: none except the one you click on.


<html>
<head>
<style type="text/css">
LI.list0 {list-style:none}
LI.list1 {list-style-image: url(li4.png); outside; color:blue}
.blacktext {color:black;outside;}
</style>
</head>

<body>
<script>
function resetAttributes(){
var listofli=document.getElementsByTagName('li')
for (i=0;i<listofli.length;i++){ listofli[i].setAttribute('class','list0')}
}
</script>
<ul>
<li class="list1" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
<li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
</ul>
<br>
<ul>
<li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
<li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
</ul>
<br>
<ul>
<li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
<li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
</ul>
<br>
<br>
<ul>
<li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
<li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.

</ul>
<ul>
<li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
<li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.

</ul>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="3" cellspacing="1"><tbody><tr><td bgcolor="#99aa99"><table bgcolor="#ffffff" border="0" cellpadding="2" cellspacing="1" width="450"><tbody><tr><td class="table7">

Property</td><td class="table7">Values</td><td class="table7">NS</td><td class="table7">IE</td></tr><tr><td class="table1">list-style type</td><td class="table5">disc<br>
circle<br>
square<br>
decimal<br>
lower-roman<br>
upper-roman<br>

lower-alpha<br>
upper-alpha<br>
none</td><td class="table5">4+<br>
4+<br>
4+<br>
4+<br>
4+<br>
4+<br>

4+<br>
4+<br>
&nbsp;</td><td class="table5">4W<br>
4W<br>
4W<br>
4W<br>
4W<br>
4W<br>
4W<br>

4W<br>
4W</td></tr><tr><td class="table1">list-style image<br>
</td><td class="table5">none<br>
url(&lt;url&gt;)</td><td class="table5">&nbsp;<br>
&nbsp;</td><td class="table5">4W<br>
4W</td></tr><tr><td class="table1">list-style position<br>
</td><td class="table5">outside<br>

inside</td><td class="table5">&nbsp;<br>
&nbsp;</td><td class="table5">4W<br>
4W</td></tr><tr><td class="table1">list-style<br>
</td><td class="table5">&lt;list-style type&gt;<br>
&lt;list style position&gt;<br>
&lt;list-style image&gt;</td><td class="table5">&nbsp;<br>
&nbsp;</td><td class="table5">4W<br>
4W<br>

4w<br>
</td></tr></tbody></table></td></tr></tbody></table>
</body>
</html>