Firefox CSS nowrap problem

css firefox nowrap
user541020 picture user541020 · Feb 23, 2011 · Viewed 9.7k times · Source

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

Prof picture Prof · Feb 24, 2011

Try removing float:left as display:inline should suffice

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Targeting only Firefox with CSS

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: <!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be …

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More