The IE Fieldset Background Color Bleed Bug

Question

Setup:

I have an HTML page with a fieldset element. The background color of the fieldset element is different from the background of the page. The border of the fieldset has a slightly darker color that the background.

Problem:

In Firefox only the area inside the border has the specified background color. In IE7 the background color flows over the area delimited by the border (only at the top).

Question:

What can I do to make the background of the fieldset element stay within the area delimited by the border on IE7?

Answer 1

Have you reset your margins and padding?

EDIT:

Actually, Matt Heerema apparently had a similar problem. Which he successfully fixed.

"Getting Fieldset Backgrounds and Legends to Behave in IE".

Answer 2

Hi, 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. "