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…