Fully faked emulation of the <fieldset><legend> form pair done via CSS means that you no longer need use these html tags outside their designated area ( specific markup within forms ) in order to achieve a visual effect, which is rightly controlled in modern times via CSS stylesheets. Observe:
Normally this is handled exclusively within forms, using
<form> <fieldset> <legend>Title Goes Here</legend> <p>text goes here</p> </fieldset> </form>
This solution allows us to do this outside of <form> tags, using semantically correct markup, without using markup tags that do not belong outside of a form, and more importantly, using the most minimal markup that still outlines the fact that we have a header of sorts involved:
<div class="boxField"> <h4>Title Goes Here</h4> <p>text goes here</p> </div>
And the stylesheet:
div.boxField {
display: block;
border: thin solid gray;
background: white;
color: inherit;
margin: 0.75em 0.15em 0.15em 0.15em;
}
div.boxField > *:first-child {
display: table;
margin: -0.76em -0.15em 0em 0.8em;
padding-left: 0.1em;
padding-right: 0.1em;
font-weight: normal;
font-size: medium;
white-space: nowrap;
color: inherit; background: inherit;
border: none !important;
}
.padextra {
/* you can add this as necessary for visual effect
either as a compound class or directly to div.boxField */
padding: 0 0.5em 0 0.75em;
}
Faked Fieldset
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pretium nulla. Aliquam eu massa. Morbi a lacus in tellus consectetuer faucibus. Ut facilisis, lectus quis imperdiet dignissim, nibh urna iaculis neque, non volutpat ante sem eget mauris. Quisque sed est sed tellus euismod feugiat. Sed urna leo, pretium et, interdum et, molestie porttitor, sem. Aliquam ac sapien id augue vehicula feugiat. Aliquam nulla enim, aliquam sed, luctus in, ornare nec, ligula. Pellentesque malesuada fringilla lectus. Suspendisse laoreet tempor tortor. Nullam in orci eget sapien porta tincidunt. Praesent convallis dolor in nunc. Quisque turpis. Praesent non nulla. Nullam vel risus eu tellus pretium consectetuer. Integer faucibus. Nunc risus odio, dignissim luctus, sodales eget, volutpat ac, wisi. Nam lorem. Phasellus placerat.
Here, they are wrapped in individual tables so you may see how well they cling to their borders, etc.
Fieldset faked - Ta da!Faked Fieldset Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pretium nulla. Aliquam eu massa. Morbi a lacus in tellus consectetuer faucibus. Ut facilisis, lectus quis imperdiet dignissim, nibh urna iaculis neque, non volutpat ante sem eget mauris. Quisque sed est sed tellus euismod feugiat. Sed urna leo, pretium et, interdum et, molestie porttitor, sem. Aliquam ac sapien id augue vehicula feugiat. Aliquam nulla enim, aliquam sed, luctus in, ornare nec, ligula. Pellentesque malesuada fringilla lectus. Suspendisse laoreet tempor tortor. Nullam in orci eget sapien porta tincidunt. Praesent convallis dolor in nunc. |
As you can see, the faker is ever-so-slightly different, top and bottom, but the rest is practically indistinguishable.
So far it's been tested on Firefox/Mozilla, Opera, Galeon, Konqueror and Epiphany under Fedora Core 1-4, and has been reported to work under Opera 7.23/Win (although the tester commented that the faked solution looked better!). Additionally screenshots have come in for OS X showing only IE 5.2 being slightly weird but otherwise pretty darn close (and again our solution looks better in the screenshots).
I'd like to hear about how it renders for other browsers and OS's, so .
Screenshots of what it's supposed to look like:
original '1 minute 30 seconds' hack by David Dorward, http://dorward.me.uk/
further refinement, examples, and exposition by Scott R. Godin, http://www.webdragon.net/
Generated 1 paragraphs, 120 words, 846 bytes of Lorem Ipsum
