David Kendall

Back to previous page

The problem IE faces when rendering fieldset background is that it applies the fieldset background to the legend, as well as the fieldset itself.

The solution to this is to seperate the fieldset from the legend. Here’s how I do it, you may be able to figure out another method but this one works perfectly fine for me;

We disassociate the legend from the fieldset we need to absolutely position it, so lets apply position: absolute to the legend css. Rememebr though this absolute positioning needs to be relative to it’s parent element (the fieldset) to prevent it from being positioned at 0,0 (top left) of the page. To do this we relative position the fieldset using position: relative.

OK, so now we have the legend and fieldset as seperate. Try it out. You will notice that because we used absolute positioning the legend is at 0,0 to the fieldset, so lets make it look like a legend should do and move it over to the right and little and up a bit. You should now have something like this

fieldset {position: relative;}
legend {position: absolute; top: -5em; left: 5em;}

Adding a background color to the fieldset will now only fill in the fieldset and will display correctly in all web browsers! You might want to play around a little with margins and padding of the fieldset and legend to create your own unique layout.

Didn`t like the css method, try the image method instead