<UL> displaying incorrectly - works fine in all browsers except Firefox 2 (screenshots included)

Question

Hey folks

OK, here's a screenshot of what it's SUPPOSED to look like:

And here's a screenshot of how it looks in Firefox 2 (on both Mac & PC)...

Every other browser gets it right (even IE6?!).

The source code is an Unordered List using Sprites with :hover effects. Here is some code for you:

The HTML:

<div id="votes">
                <ul id="voteOptions">
                    <li id="labour"><a href="#">Labour</a></li>
                    <li id="conservative"><a href="#">Conservative</a></li>
                    <li id="libdem"><a href="#">Liberal Democrat</a></li>
                </ul>
        </div>

The CSS:

#votes {
 width:653px;
 position:relative;
 top:-440px;
 margin-left:auto;
 margin-right:auto;
}

ul#voteOptions li a{  
    height: 75px;  
    float: left;  
    text-indent: -9999px;  
    margin-bottom:50px;
}  

ul#voteOptions li#labour a{  
    width: 653px;  
    background: url('votes.png') no-repeat 0px -2px; 
}

ul#voteOptions li#labour a:hover{  
    background: url('votes.png') no-repeat 0px -77px;  
}

ul#voteOptions li#conservative a{  
    width: 653px;  
    background: url('votes.png') no-repeat 0px -152px;  
}...

(etc. etc - code repeats for conservative and libdem, you get the idea).

So what am I doing wrong? I've tried lots of stuff but can't seem to get this darn thing to work in FF2.

Jack

Answer 1

Is ul#voteOptions li { clear: both; } fixing the issue?