Horizontal list with image replacement - firefox problem

[Woolley5000]

Hi,

trying to get these buttons to work in firefox...
Example

HTML:

<div id="mainnav">
		<ul>
		<li id="profile"><a href="profile.php"><span>Profile</span></a></li>
	  	<li id="films"><a href="films.php"><span>Films</span></a></li>
      	        <li id="stills"><a href="stills.php"><span>Stills</span></a></li>
      	        <li id="contact"><a href="contact.php"><span>Contact</span></a></li>		
		</ul>
</div>

CSS:

#mainnav {width: 446px; margin: 173px auto 0 auto;  }
		
		#mainnav ul
		{ list-style-type: none;}

		#mainnav ul li
		{float:left; width: 84px; }
				
		#mainnav ul li#profile a
		{
		height: 21px;
		width: 84px;
		background: #000 url(img/nav/profile_off.jpg) no-repeat top left;
		display: block;
	
		}
		
		#mainnav ul li#profile a:hover
		{
		background: url(img/nav/profile_on.jpg) no-repeat top left;
		}
		
		#mainnav ul li#profile a span {display: none;}
		
		#mainnav ul li#films a
		{
		height: 21px;
		width: 84px;
		background: #000 url(img/nav/films_off.jpg) no-repeat top left;
		display: block;

		}
		
		#mainnav ul li#films a:hover
		{
		background: url(img/nav/films_on.jpg) no-repeat top left;
		}
		
		#mainnav ul li#films a span {display: none;}
		
		#mainnav ul li#stills a
		{
		margin: 0 0 0 105px;
		height: 21px;
		width: 84px;
		background: #000 url(img/nav/stills_off.jpg) no-repeat top left;
		display: block;
		}
		
		#mainnav ul li#stills a:hover
		{
		background: url(img/nav/stills_on.jpg) no-repeat top left;
		}
		
		#mainnav ul li#stills a span {display: none;}
		
		#mainnav ul li#contact a
		{
		height: 21px;
		width: 84px;
		background: #000 url(img/nav/contact_off.jpg) no-repeat top left;
		display: block;		
		}
		
		#mainnav ul li#contact a:hover
		{
		background: url(img/nav/contact_on.jpg) no-repeat top left;
		}
		
		#mainnav ul li#contact a span {display: none;}

The rollovers work fine in IE but Firefox doesn't seem to recognise the links. I'm sure it's got something to do with the floating but I've tried various tweaks and nothing seems to help.

Any ideas?

[Shockt]

I suggest you browse through the Listamatic tutorials:
http://css.maxdesign.com.au

[BonRouge]

#mainnav ul {
height:21px;
}

There's a small problem with the method you're using there - the hover background images are not pre-loaded, so there's a short pause on the first hover.

Here's a fix for that and here's another way to do it.