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>

Answer 1

Hello,

you don't need to overflow the content! In IE(6), by default, the "fieldset" tag has not padding, in FF yes! 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 2

Found solution, add conditional css style:

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