A Fieldset Alternative

Keywords:
05 May 2007

Fiedsets are an easy way to add some separation between content and clearly define areas within a webpage. However, if you wish to add a background to them it can be rather problematic with Internet Explorer. The background appears to spill above the fieldset to the top of the legend.

To see what I mean take a look at the screen shot below of a fieldset on IE6.

Internet Explorer Fieldset

There are a couple of ways that you can address the problem.

Test Fieldset

In this example I have taken the legend out of the normal flow by making it absolutely positioned within a relatively positioned filedset.

I have positioned the legend above the fieldset by -0.6em.

It should appear to be very similar to my next (non-fieldset) example.

But, you will notice some inconsistencies between the different browsers. Once again IE is the offender. It will not format the content margin the same as the other browsers. This may or may not be acceptable to you depending on what you are doing. If not, I have an alternative below.

Fieldset Alternative
This is a fieldset alternative, it uses a relatively positioned div for the main container and a absolutely positioned div for the pseudo legend.

The HTML
The CSS

Fieldset

Thanks a lot! Works like a charm:)

Submitted by Anonymous (not verified) on Wed, 2010-09-01 18:02.

About Us

NZ Web Hosting Internet Technolgies Blog.

Website design, website development, promotion and search engine optimisation.