Fieldset and legend on IE6 and Firefox

Take a look at this simple css and html code, here's the css code:

fieldset{
background-color: #c0c0c0;
}

and here's the HTML part:

<fieldset>
<legend>Legend</legend>
<label for="something">something</label>
<input name="something" type="text">
</fieldset>

On firefox, it will be viewed like this:

While on IE6, it will be viewed like this:

And that's quite irritating. I don't know about other browser like safari and opera, but so far, here's a a quick code to solve the problem. You only need to change the css code.

fieldset {
display: block;
background-color: #c0c0c0;
position: relative;
}

legend {
padding: 0;
position: relative;
/* this works for IE6, to move up the legend */
top: -0.7em;
}

/* Hide this rule from IE */
legend {
/* on Gecko based browser we move the legend up with this */
margin-bottom: .3em;
}

The result is like this in Firefox:

And in IE6:

Finally, the background color in IE6 is not exceeded the top border, you can adjust the position of the content by adjusting the number yourself, I'm sure everybody is quite familiar with that.