Software: IE6 Fieldsets Leak

When creating HTML forms with the <fieldset> element, I add some padding so that the elements within the fieldset do not touch their container's border. In the CSS box model, padding is the amount of space between a box's border and its contents.

Below is an example of a fieldset definition that has a legend in the fieldset, a label and a field:

<div style="background-color:9dbc80">
  Hello world
<fieldset style="background-color:#d1dfd6;margin:0px;
padding:4px;border:1px solid black">
  <legend>Test legend</legend>
 <label>Test:</label>
 <input type="text" value="This is a test"/>
</fieldset>
  Bye world.
</div>

And below is a rendering of the example defintion.

Hello world

Test legend

Test:

Bye world.

If you are using IE6, you should see that the background of the fieldset extends beyond the border to surround the legend text, while if you are using Firefox, the background is entirely enclosed within the border of the fieldset. Even worse in IE6, the amount of area beyond the margin depends on the padding value!