Tabs not displaying correctly in Firefox

The code below is not displaying correctly in FF. The code looks great in IE but in Firefox you can see most of the bullets in the underlying layer.

HTML code used
<ul id="navigation">
<li><span><a href="index.htm">Home</a></span></li>
<li><a href="#"><span>Vet Services</span></a></li>
<li><a href="#"><span>Preventative Services</span></a></li>
<li><a href="#"><span>Boarding</span></a></li>
<li><a href="#"><span>Grooming</span></a></li>
<li><a href="#"><span>Staff</span></a></li>
<li><a href="#"><span>Pet Care</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Location</span></a></li>
</ul>

CSS used

#navigation a
{
color: #fff;
font-weight: bold; font-size: .7em; font-family: Verdana, Arial, Helvetica;
background: #781351 url('../images/left-tab.gif') no-repeat left top;
text-decoration: none;
padding-left: 5px;
float: left;
}

#navigation a span
{
background: url('images/right-tab.gif') no-repeat right top;
padding-right: 5px;
float: left;
}

#navigation a:hover {
color: #000;
background: #ffa20c url('../images/left-tab-hover.gif') no-repeat left top;
padding-left: 5px;
float: left;
}

#navigation a:hover span
{
background: url('../images/right-tab-hover.gif') no-repeat right top;
padding-right: 5px;
float: left;
}

#navigation a, #navigation a span
{
display: block;
float: left;
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
float: left;
}

#navigation li
{
float: left;
margin: 0;
}


Also is float: left; required if it is appearing correctly in IE without it, and definitely not appearing correctly in FF anyway?

Thank you in advance for any advice or suggestions.

replace this


#navigation li
{
float: left;
margin: 0;
list-style:none;
}


vineet

I think your css isn't quite right:

#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
float: left;
}


should be

ul#navigation
{
list-style: none;
padding: 0;
margin: 0;
float: left;
}

The code below is not displaying correctly in FF. The code looks great in IE

How it looks in IE means little since IE is the worst browser on the planet. You should be using FF, or any other modern browser, to test your markup in before looking to see how IE screws things up, which is why you are having problems and will continue to do so.