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:
<img src="/images/blog/fieldset_bleeding.png" alt="Fieldset Bleeding" />
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…
