Firefox CSS nowrap problem

Question

I'm trying to create a horizontal (no line breaks) unordered list of images on my website using code as follows:

<ul class="ImageSet">
    <li>
        <img src="blah">
    </li>
    <li>
        <img src="blah">
    </li>
    <li>
        <img src="blah">
    </li>
</ul>

In my CSS, I'm using the following rules:

.ImageSet { white-space: nowrap; }
.ImageSet li { display: inline; float: left; height: 100% }

This is working properly in Chrome, but not in Firefox, for some reason does anyone know why?

EDIT: To clarify, the problem in FF is that the li's still wrap. I'm trying to make them all appear in a single, unbroken horizontal line going off the rightmost edge of the page.

Answer 1

Try removing float:left as display:inline should suffice

Answer 2

When you float li's they will wrap when they reach the end of their parent container (which could be the body tag). If you are wanting the image to disappear out of the screen you will need to set the width of the parent container (the ul) and use overflow hidden or auto to get your desired effect.