Background image for lists in multiple browsers

I'm having a speck of difficulty getting Netscape and Firefox to display bullets in a list the same way as Internet Explorer shows them. Can anyone give me some pointers?

Here's the code for it:
styles:
ul.firm
{
list-style-type: none;
padding: 0;
margin: 0;
}
li.firm
{
background-image: url(/images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .7em;
padding-left: 1.0em;
}

display code:
<span class="smalltext">
<ul class="firm">
<li class="firm">Project Management
<li class="firm">Design Concept Development
<li class="firm">Local Administration and Review Board Approvals
<li class="firm">Construction Administration
<li class="firm">Tax Credit Applications for Adaptive Use Projects
</ul>
</span>

And here's the page on the web:
http://www.craddockcunningham.com/people_employee.php?ID=6
If you look at it in several different browsers, you can see that the bullets do vastly different things.

Thanks!!!
Matt Tyree

They look the same to me. Just like normal bullets. I looked in IE6 and FF.

Okay, I guess Opera shows the most difference. However, Ie shows the bullet pretty much dead center vertically on each line. In Netscape and Firefox the bullet is near the bottom of the line. In Opera it's even being chopped because it's so low.

The difference between IE and FF is subtle, but it's there.

Just one question, why dou you give all elements classes? Don't you know how cascades work?ul.firm
{
list-style-type: none;
padding: 0;
margin: 0;
}
ul.firm li
{
background-image: url(/images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .7em;
padding-left: 1.0em;
}

display code:
<span class="smalltext">
<ul class="firm">
<li>Project Management
<li>Design Concept Development
<li>Local Administration and Review Board Approvals
<li>Construction Administration
<li>Tax Credit Applications for Adaptive Use Projects
</ul>
</span>It may also be the smalltext class wich cause problems.

Heh heh...I do crazy things because I am just learning CSS! That's why I'm asking questions. I don't know it all yet! :)

Here's what my code looks like now after some tips:
.smalltext {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.4em;
font-style: normal;
text-decoration: none;
}

ul.firm
{
list-style-type: none;
padding: 0;
margin: 0;
}

.firm li
{
background: url(/images/arrow.gif) no-repeat 0 0.5em;
padding-left: 1.0em;
}


<ul class="firm smalltext">
<li>Project Management
<li>Design Concept Development
<li>Local Administration and Review Board Approvals
<li>Construction Administration
<li>Tax Credit Applications for Adaptive Use Projects
</ul>Does that look better? Is that a pretty clean way of doing it?

The bullets are still SLIGHTLY off between the browsers. Not as bad as before though.

Thanks!