Field overflow in Firefox

Question

I have a css problem with fieldset and wondering if you can help?

I have a set of fields with a width less than the width of its contents.

I want the field to display a horizontal scrollbar as the content is too large, but it only works in IE and not in Firefox.

Thanks in advance.

Eric

This is html

<fieldset style=" width:150px; overflow:scroll;" > <div style="width:200px; height:50px; background:red;"> Contents... </div> </fieldset> 

Answer 1

The best I can think of is to put 2 nested divs within a set of fields:

 <fieldset style="width:150px" > <div style="width: 150px; overflow-x:scroll;"> <div style="width:200px; height:50px; background:red;"> Contents... </div> </div> </fieldset> 

Answer 2

Try the following:

 <fieldset style=" width:150px;"> <div style="width:200px; height:50px; background:red; overflow:scroll;"> Contents... </div> </fieldset> 

Answer 3

Like others already , this is a bug in Firefox: Error 261037 - the overflow property has not been implemented at the field level (reported in 2004 and still not fixed)

Answer 4

I had the same problem. FF does not allow overflow: hidden in fieldset tags regardless of whether you use overflow-y or overflow-x. My fix used "-moz-hidden-unscrollable". Like this...

 fieldset{ overflow: -moz-hidden-unscrollable; } 

This is a dirty hack, but it works.

re: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values