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:

<fieldset style="border:thin solid #990033;">
    <legend>test</legend>
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div>
</fieldset>
<p>&nbsp;</p>
<div style="border:1px solid #999999; padding:0 8px 8px 8px;">
    <label style="background-color:#FFFFFF; padding:0 5px; position:relative; top:-10px;" >test</label>
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div>
</div>

I pasted this into an HTML document and both boxes look identical in Firefox (3.5). In internet explorer they have different internal padding. A handy trick for CSS is to start everything off with no padding and no margin: * {padding:0; margin:0} and just apply the ones you need, each browser tends to put different default paddings and margins on elements. — MalphasWats, Nov 04 '09 at 15:13

score 19 · Accepted Answer · answered Nov 05 '09 at 13:04

19

Found solution, add conditional css style:

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

answered Nov 05 '09 at 13:04

jmav

3,119
4
27
27

Perfect! Thank you! Note that you can't float the fieldset. I made a showcase fiddle with also Opera support: http://jsfiddle.net/dsHUW/5/ – falsarella Jun 21 '12 at 15:13
1

Thanks! Just confirmed: this bug still exists in FF 20.0.1 and also exists in Safari 5.1.2. Works fine in Chrome and IE 7-10. `display: table-column;` fixed it for Firefox, but not Safari. IE won't render the fieldset at all (must use `display:block`, the default, instead). Chrome doesn't seem to care whether it's `block` or `table-column`, renders fine either way. [See the fiddle](http://jsfiddle.net/VVjnr/) (All tests done in Windows 7 SP1) – nothingisnecessary May 17 '13 at 23:51
`display: table-column;` does not fix the issue in Chrome 36 – Már Örlygsson Sep 04 '14 at 14:32

score 17 · Answer 2 · answered Jul 17 '12 at 06:02

17

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

answered Jul 17 '12 at 06:02

Jerome

191
1
3

This bug is still present in FireFox 32, and Chrome 36. – Már Örlygsson Sep 04 '14 at 14:30
Is it a bug? whatever, it still present in FF v54.0.1 - Just use the fix `fieldset{display: table-column;}` and it works perfectly! – devasia2112 Jul 04 '17 at 04:27
@B4NZ41 In FF 52.5.3 ESR the `fieldset{display: table-column;}` doesn't solve overflow+width problems and cannot work for fixed/absolute positioned element (automatically converted to display:block but looks like display:table). I tried but doesn't work. Bad news: Chrome has "improved" the fieldset to work like in firefox. It is sad. – 18C Jan 10 '18 at 08:01

score 3 · Answer 3 · answered Apr 17 '15 at 09:28

3

From a blog post by Emil Björklund:

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

answered Apr 17 '15 at 09:28

Gebb

6,371
3
44
56

2

1000X yes, thank you for this. This should be accepted answer, the other one doesn't take any other browsers except ie into account. – Bryan Aug 05 '15 at 02:16

score -1 · Answer 4 · edited Aug 28 '12 at 09:07

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!

fieldset firefox overflow CSS fix

4 Answers4

Linked