The Fieldset's Background Color Gets Out of Border in Ie

Background appearing outside of the Fieldset's border in IE8

You can try to give negative margin-top to legend and this will get fixed.

*margin-top:-22px;   //for IE7
margin-top:-22px\0/; //for IE8, Note `\0/` characters here.

The fieldset’s background color gets out of border in IE

This is a well-known IE bug, and occurs regardless of whether you use JavaScript to generate the elements or write the HTML yourself.

legend is a child of fieldset, but since it's located slightly "above" the top edge of the fieldset, IE (incorrectly) extends the background color of the fieldset to contain the legend.

An easy workaround is to absolutely position the legend to take it out of normal element flow, and manually adjust its location so it rests roughly where it normally is. Also position the fieldset relatively so the legend remains in its vicinity.

Something like this (adjust the values as needed):

fieldset {
    position: relative;
    margin: 10px;
}

fieldset legend {
    position: absolute;
    top: -0.5em;
    left: 0.5em;
    font-size: 14px;
    font-style: normal;
}

The IE Fieldset Background Color Bleed Bug

see this article for how to fix this problem:

http://www.communitymx.com/content/article.cfm?cid=DD9F3

In summary:
"
Since IE's problem seems to extend from the fact that the legend is a child of the fieldset, the way to fix the bug is to disassociate the legend with the fieldset. The legend element has to stay nested within the fieldset element, of course, for the (X)HTML to remain valid, but if we absolutely position it, it will be removed from the flow of the document and treated by elements outside of it — including its parent — as if it didn't exist.
"

FieldSet background color

You can set the background color as

<fieldset style="float: left; width: 280px; background-color:red;">

you can use color codes for setting background color like this

<fieldset style="float: left; width: 280px; background-color:#999999;">

you can visit http://www.colorpicker.com/ for finding color codes

How to show the fieldset border through a section of the label?

background can approximate this without an extra div. You simply need to find the correct color:

fieldset {
  border: 1px solid black;
}

legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: linear-gradient(black 0 0)center/100% 1px no-repeat;
}

legend div {
  background-color: white;
  padding:0 0.5em;
}

<form>
  <fieldset>
    <legend>
      <div>Form Item</div>
      <div>(extra 1)</div>
    </legend>
    <label>Input:</label><input>
  </fieldset>
</form>

---

Related Topics