CODEWITHSUNDEEP
css
jmav
jmav

Reputation: 3149

fieldset firefox overflow CSS fix

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>

Upvotes: 11

Views: 12856

Answers (4)

Gebb
Gebb

Reputation: 6556

From a blog post by Emil Björklund:

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

Upvotes: 3

BitDrink
BitDrink

Reputation: 1193

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!

Upvotes: -1

Jerome
Jerome

Reputation: 191

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

Upvotes: 17

jmav
jmav

Reputation: 3149

Found solution, add conditional css style:

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

Upvotes: 19

Related Questions