CSS overflow IE vs FF

Question

I'm trying to have a single row of numbers, and if the row is wider than let's say 100 pixels, I want a horizontal (x) scrollbar to appear.

This is easy to achieve in FireFox, but IE keeps folding the list and giving me a vertical (y) scrollbar as well, and items that I want to the right are appearing below.

anyone know how to do this?

Answer 1

Try to set the "white-space" to "nowrap".

Answer 2

Because of the fact that there are variations in box model for IE and FF, such thing can happen, you need to increase the width (and or height) of the content area and then see.

Answer 3

You could try put it in a DIV and make the div's position absolute. But as I was just working on that can cause issues with FF / Chrome. So you can put an IF statement in such as :

            <!--[if IE]>
    <style>
            .content{
            position: absolute;
            }
            </style>
    <![endif]-->

I just used that myself to make sure my content frame sat still. Although for your purposes you may need to incorporate telling the text not to wrap etc.

Gdluck

EDIT You could even just set a min width to your DIV ID? That would probably work just as well but then again if does cause issues with compatibility use an IF function.

Also see http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug Shows variations on how the box model from IE compares to the W3C standard + other info (If your curious as to why the problem you have is happening)