CODEWITHSUNDEEP
css
Himmators
Himmators

Reputation: 15016

How come overflow:hidden works on a div but not a fieldset in firefox?

I have a fieldset that looks like this:

<fieldset>
    <input><label>tada</label>
    <input><label>tada</label>
</fieldset>

fieldset{
    overflow: hidden;
    height: 20px;
}

input{
    display: block   
}

Js-fiddle:

http://jsfiddle.net/GWdWy/1/

how come the fieldset shows all it's containing elements, whilst if I change the fieldset to a div: http://jsfiddle.net/GWdWy/2/

the overflow hidden works.

Upvotes: 2

Views: 2028

Answers (3)

max kaplan
max kaplan

Reputation: 589

I had the same issue. Firefox does not seem to allow overflow: hidden on fieldset tags regardless if you use overflow-y or overflow-x. My fix was using '-moz-hidden-unscrollable'. Like this...

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

It is a dirty hack but it works.

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

Upvotes: 2

mzografski
mzografski

Reputation: 374

The fieldset has padding applied by the default browser css settings.

Use a CSS Reset to make sure the defaults are equalised in all browsers and elements.

Check the most used one - Eric Meyer's reset: http://meyerweb.com/eric/tools/css/reset/

in your first fiddle set following css for the Fieldset:

fieldset{
  overflow: hidden;
  height: 20px;
  padding: 0;
  margin: 0;
  border: none;
}

and this will equalize the display. For Firefox a workaround can be found here: Fieldset contents overflow in Firefox

Upvotes: -2

Mr. Alien
Mr. Alien

Reputation: 157384

I guess you must be on Firefox, if it's that so, than it's a bug

Bug 261037 - overflow property not implemented on fieldset

Workaround: I nested a div inside the fieldset

Demo

fieldset div {
    overflow: hidden;
    height: 20px;
}

Upvotes: 4

Related Questions