fieldset firefox overflow CSS fix

Question

How can i set content to overflow in fieldset? It works in IE but not in FF.

Same functionality I can achieve with div element in both browsers.

Sample:

Answer 1

This is actually a bug in Firefox and it exists for almost 8 years. :D https://bugzilla.mozilla.org/show_bug.cgi?id=261037

Answer 2

you don't need to overflow the content! In IE(6), by default, the "fieldset" tag has no padding, in FF it has! That is why you have a different behavior!

You can reset the padding (padding:0px;) of the fieldset but in this case, in FF, the label doesn't look fine! To fix that, you can reset the padding-bottom of the fieldset and apply a "margin-left:-12px" to the div inside the fieldset. However, that solves the problem with FF but generates an issue in IE!

So, my suggestion is to use conditional CSS statements to apply to each browser the right rules of style!

Answer 3

Found solution, add conditional css style:

fieldset {
    display: table-column;
}
<!–[if IE]>
fieldset {
    display: block;
}
<![endif]–>

Answer 4

From a blog post by Emil Björklund:

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}