Fixing the Fieldset Bleeding Problem: Part 1
First installment of a multi-part series on fixing a problem with fieldsets and legends using an alternate background color. In IE7 the fieldset background color bleeds into the positioned legend element (as shown in the image).
Recently, I’ve been redesigning several forms and came across a rather ugly problem in IE7 and previous versions that are affected by a problem with background color of a fieldset bleeding up into the legend associated with it.
A picture of the problem as it looks in IE7 is shown below:

This brief description of the problem is the first installment of a series of posts describing how to fix the problem, as I work through a solution.
The relative HTML:
<form class="filter" action="" method="post">
<fieldset>
<legend>Filter</legend>
<label for="title">Title: <input type="text" name="title" id="title" />
</fieldset>
</form>
The relative CSS:
form.filter fieldset {
background-color: #eef;
color: inherit;
}
form.filter legend {
background-color: transparent;
color: #059;
}
More to follow as I work through a variety of solutions…



















