advice about css problem

[newbiegalore]

Hello all,
I am trying to develop a firefox toolbar and am facing a
problem with using css and would appreciate any pointers/advice about
how to fix it :-). I am a newbie to css.

A detailed commentary o the problem can be found at
http://groups.google.com/group/mozil...8e0a6092e1a27#

The thing is that I need to change an image dynamically on a firefox
toolbar depending on the reply I get from my server, red image or
green image etc.

in the css file I have

#JAAL-ResultButton[status="green"]{
list-style-image: url("chrome://sample/skin/green.png");
height: 28px;
width: 6px;

}

#JAAL-ResultButton[status="red"]{
list-style-image: url("chrome://sample/skin/red.png");
height: 28px;
width: 6px;

}

The problem is that when I use the status tag the toolbar does not
show any image at all. When I remove the status tag, the toolbar shows
a green star. Am I using the status tag correctly?

I am using the following javascript to dynamically change the
displayed image

if ( jaaldata.indexO f("green") == -1 )
alert('green not found');
else{
alert('green found at' +
jaaldata.indexO f("green") );
var jaalstar = document.getEle menById("JAAL-
ResultButton");
jaalstar.setAtt ribute( "status", "green" );
}

Any pointers/thoughts/comments?