Firefox displaying lists wrong

Question

FireFox seems to put any words in list items with more than one word on separate lines, like this: http://a.flatsi.es/projects/7temwk/images/j7tjrt
But in everything else it is how I want it, like this.
http://a.flatsi.es/projects/7temwk/images/9766kh

A point in the right direction would be super.

HTML

<div class="singlenav">
<ul>
<li><a href="/v2">Home</a></li>
<li><a href="/v2/?p=17">About</a></li>
<li><a href="/v2/?p=14">Information</a></li>
<li><a href="/v2/?p=11">Study Skills</a></li>
<li><a href="/v2/?p=8">Discuss</a></li>
<li><a href="/v2/?p=5">Contact</a></li>
</ul>
</div>

CSS

.quicklinks{
width: 100%;
font: bold 20px 'Helvetica',sans-serif;
color: #333;
text-align: left;
margin: 70px 0 0 0;
display:inline-block;
}

.quicklinks li{
white-space: nowrap; 
}


.quicklinks li a{
color: #333;
text-decoration: none;
padding: 10px;
margin: -10px;
}

Answer 1

Since we don't have a HTML test to go off I'm going to try drawing upon 'psychic powers'. Try this:

li { white-space: nowrap; }

Edit : Works against test case on Fx 15

Answer 2

Maybe you can try adding a height setting that will manually force it to no go over a certain height.

eg:

height: 100px;

Answer 3

I think the negative margin in li a means that inside of a wants to be bigger than its box and therefore wraps the word if wrappable. I've never seen a negative margin equal on parallel sides, but if that actually shrinks an element I'm probably wrong.