Resolving Internet Explorer’s Legends Issues
In a totally unexpected turn of events (yeah, right!) Internet Explorer handles legends differently from other browsers. From experimentation, it seems that Internet Explorer treats legend
elements as if they’re inside the fieldset
, while other browsers treat them as if they’re outside the fieldset
. I’m not saying that any browser’s wrong, but we have to circumvent these differences somehow, and creating a separate IE style sheet seems to be the best solution.
If you put a background-color
on a fieldset
with a legend
, as in Figure 14, you can see the problem all too clearly.
Figure 14: Browser rendering of fieldset
elements with background color (See larger image in new window.)
The fieldset
on the left shows how most browsers render a legend
and fieldset
with a background color. The fieldset
on the right shows how Internet Explorer renders it — the background-color
of the fieldset
appears to extend beyond its border, stretching to fit the height of the legend
.
The way to avoid this problem is to accommodate Internet Explorer browsers with a separate style sheet that uses conditional comments:
<!--[if lte IE 7]>
<style type="text/css" media="all">
@import "css/fieldset-styling-ie.css";
</style>
<![endif]-->
This statement includes a style sheet for Internet Explorer 7 and earlier, as these are the versions that currently display this deviant behavior. Any other browsers will ignore it. We could use a style sheet that applies to any version of Internet Explorer — including those released in the future — but the legend
display difference may be corrected by then, so it’s safest just to apply it to the versions we know for the present.
Inside that style sheet we use relative positioning on the legend
to move it up to align with the top of the fieldset
:
legend {
position: relative;
left: -7px;
top: -0.75em;
}
fieldset ol {
padding-top: 0.25em;
}
In this case, the value we’ve given the legend
‘s top
— 0.75em
— just happens to be the right value to get the legend
to align with the fieldset
. It may vary depending on other styles we might apply to the legend
(such as margin
and padding
). This is quite a robust solution — we’ve used relative units, so if users change the text size in their browsers, the position of the legend
will shift accordingly and still line up.
In addition to moving the top of the legend
, we move it 7px to the left by applying a left
value of -7px
. This step counters an Internet Explorer quirk — IE always shifts legends to the right by 7px (regardless of text size), so we need to negate that shift to get the legend
and the label
elements lining up neatly.
Because we’re moving the legend up relatively, it will create more space below the legend
. To counteract this space, we reduce the padding at the top of the ordered list by an equivalent amount, changing it from the original value of 1em
to 0.25em
.
The last Internet Explorer fix is to relatively position the fieldset
itself:
fieldset {
position: relative;
}
Without this rule, Internet Explorer produces some weird visual effects around the legend
. How weird? You can see exactly how weird in Figure 5.15.
Figure 15: Visual aberrations in Internet Explorer (See larger image in new window.)
We really need to avoid the IE aberrations we’ve seen, but we’re almost there — now we’ll just set the position
of the fieldset
to relative
to restore everything to normal.
Styling Legends and Fieldsets
In all browsers, legend
s will have some padding
by default. The amount of padding
varies between browsers, so to have the legend
lining up nicely with our label
s we’ll eliminate the padding
in our main style sheet:
fieldset-background-color.css (excerpt)
legend {
margin-left: 1em;
padding: 0;
color: #000;
font-weight: bold;
}
The default border
for fieldset
elements is normally an inset border — which doesn’t match some sites — so here we’re going to make it a flat, 1px border. In addition, we’ll add in a background color that will make the fieldset
elements stand out from the normal page background, marking them as special areas:
fieldset-background-color.css (excerpt)
fieldset {
float: left;
clear: both;
width: 100%;
margin: 0 0 1.5em 0;
padding: 0;
border: 1px solid #BFBAB0;
background-color: #F2EFE9;
}
Generally speaking, we don’t want any borders or background color behind the submit fieldset
, so it’s quite easy to turn those off:
fieldset-background-color.css (excerpt)
fieldset.submit {
float: none;
width: auto;
border-style: none;
padding-left: 12em;
background-color: transparent;
}
Now we’ve got fieldset
elements with a background color and a legend
that lines up neatly with all the other form elements, as in Figure 16.
Figure 16: fieldset
elements with background-color
set and adjustments made to legend
The cut-off of color behind the legend
can sometimes look a bit abrupt, as you can see in the magnified view of the legend
shown in Figure 17.
Figure 17: Magnification of legend
— cut-off of background color is apparent
This cut-off will become more pronounced if we use a fieldset
background color that has more contrast with the normal page background color. If you want to counteract this effect, it’s possible to put a gradient background image into the fieldset
that smoothly changes the color from the page background color (white) to your chosen fieldset
background color:
fieldset-background-image.css (excerpt)
fieldset {
float: left;
clear: both;
width: 100%;
margin: 0 0 1.5em 0;
padding: 0;
border: 1px solid #BFBAB0;
background-color: #F2EFE9;
background-image: url(images/fieldset_gradient.jpg);
background-repeat: repeat-x;
}
That background-image
rule will also be applied to our submit fieldset
, so to keep a clean, transparent background, we’ll also have to cancel the fieldset
:
fieldset-background-image.css (excerpt)
fieldset.submit {
float: none;
width: auto;
border-style: none;
padding-left: 12em;
background-color: transparent;
background-image: none;
}
See Figure 18 — the form looks a lot smoother, no?
Figure 18: fieldset
elements with background color and gradient images applied