SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials Emulating the Fieldset Element

Emulating the Fieldset Element

Exabyte Tutorials Mar 16, 2007

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):

image 1

Here's what they look like in Firefox:

image 2

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

Emulating the Fieldset Element

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

<fieldset> comes with the <legend> element, which is used for the title text.

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

.fieldset {
border-right: 1px solid #75736E;
border-bottom: 1px solid #75736E;
border-left: 1px solid #F2F0EE;
border-top: 1px solid #F2F0EE;
padding: 10px 3px 3px 3px;

}

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.

.outer {
border-left: 1px solid #75736E;
border-top: 1px solid #75736E;
border-right: 1px solid #F2F0EE;
border-bottom: 1px solid #F2F0EE;
width: 200px; /* CHANGE THIS FOR BOX SIZE */
}

Now we need our title element:

.legend {
float: left;
margin-left: 15px;
margin-top: -8px;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
background: #FFF;
}

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

<div class="legend">Lipsum.com Is The Best</div>
<div class="outer">
<div class="fieldset">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec congue fermentum metus. Quisque vel ante. Cras purus metus, dignissim at, luctus et, sollicitudin eget, urna. Maecenas eget lacus. Aenean bibendum risus non erat mattis semper. Aliquam placerat nibh eget lacus. Sed blandit eleifend justo. Nam elit. Fusce feugiat orci id eros facilisis laoreet. Integer vestibulum condimentum purus. Proin vehicula congue lacus. Quisque placerat diam nec enim. Nunc lorem. Maecenas nec sem sed nulla tristique faucibus.</div></div>

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

   
subscribe to newsletter