Emulating the Fieldset Element

Valid XHTML/CSS fix for <fieldset> lovers.

I've seen sites out recently who are using and abusing the fieldset tag to use for their layout. This isn't a good thing, since <fieldset> is meant to be for forms. To stop confusing search engines and users, I have come up with a simple div/CSS fix for you guys to use so everyone can be happy :)

The reason why you should do this is firstly because fieldsets show up differently in different browsers. Here's what they look like in Opera (my browser, you should use it too):

Here's what they look like in Firefox:

and IE7 (heck knows what they'd look like in IE6 probably worse..)

As you can see it's pretty varied and the text is going everywhere.

Start off by defining our fieldset element, note that this is just the element that will be used for our content only.

This sets out an outer border as well as the padding for the content. The padding is so much at the top because of the legend pseudo style needs some extra room.

Here's the code for the outer wrapper which does an external border for you to add the weird bevelly effect. You can change the width because this is simply the bounding so far.

Now we need our title element:

Using margin-top and a negative integer means that the styled element moves upwards 8 pixels. This is the same for any other padding or margin element you might wanna use.

You're probably wondering how to use it now.. I guess I'll have to tell you

I hope you found this useful, comments please!!!