Alternative to fieldset & legend?

HTML & CSS
1

I’ve had no end of browser compatibility issues with using fieldsets and legends in a form. In firefox, I don’t have too much trouble. In IE…well…lets just say all bets are off. Margins and padding are all over the place, and I get wierd random margins collapsing when input elements are hovered, or if display goes from none to block on various sections.

Anyway, I’d like to start from scratch and see if someone has reinvented the concept of fieldsets and legends using divs or some such thing. I tried to do it, but got stuck, and just completely botched up what I was attempting to do.

Any ideas? Thanks :slight_smile:

[edit]: I was able to pull my code back together. Basically, it doesn’t look too shabby, aside from the darn background color I can’t get rid of on the .legend class.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* start defaults */
	body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td { margin: 0px; padding: 0px; }
	body {
		/*text-align: center;*/
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 100.01&#37;;
		color: black;
	}
	p { margin: .2em 0 .8em 0; }
	ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
	ul, ol { margin-top: .2em; margin-bottom: .8em; }
	
	a img { border: none; }
	td img { display: block; }
	
	table { width: 100%; }
	.biggest { width: 100%; }
	td.smallest, table.smallest { width: 0px; }
	
	.left1 { text-align: left; margin: 0 auto; }
	 img.left1 { float: left; }
	
	.right1 { text-align: right; margin: auto 0; }
	img.right1 { float: right; }
	
	.center1 { text-align: center; margin: 0 auto; }
	.center1 table { margin-left: auto; margin-right: auto; }
	img.centerimage { display: block; text-align: center; margin: 0 auto; }
	
	.top1 { vertical-align: top; }
	
	.bottom1 { vertical-align: bottom; }
/* end defaults */


/* start fieldset stuff */
	.fieldset {
		position: relative;
		border: 1px solid black;
		background-color: #dfe4ee;
		margin: 40px 12px 12px 12px;
		padding: 20px 0px 15px 0px;
	}
	
	.legend {
		position: absolute;
		margin: -32px 0px 0px 12px;
		padding: 0px 3px 0px 3px;
		background-color: #dfe4ee;
		font-weight: bold;
		font-size: 115%;
	}
	.fieldset .fieldset {
		background-color: #CAD2E3;
		margin-left: 58px;
		margin-right: 22px;
	}
	
	.fieldset .fieldset .legend {
		background-color: #CAD2E3;
	}
/* end fieldset stuff */


/* start fieldset contents */
	form .question {
		color: #555555;
		font-weight: bold;
		margin: 8px 22px 18px 22px;
		padding: 0px 0px 0px 0px;
	}
	
	form .question div {
		padding-bottom: 6px;
	}
	
	form .question textarea {
		margin-left: 12px;
	}
	
	form .question span {
		margin-right: 8px;
	}
	
	form .question .smalltext {
		font-weight: normal;
		font-size: 90%;	
	}
	
	
	form input[type="text"], form textarea, form select {
		border: 1px solid #3b6e22;
	}
/* end fieldset contents */
</style>
</head>

<body>
<form>
<div class="fieldset">
<div class="legend">Text for display</div>
  <div class="question">
	 	<span>This is a question where you select a number?</span>
		<select name="" size="1" >
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
	   </select>
  </div>
  <div class="question">
		<div>Your Text here: </div>
		<textarea name="textarea2" cols="45" rows="8"></textarea>
  </div>
  <div class="question">
		<span>Your Text here again: </span>
		<div class="smalltext">But only if you really want to</div>
		<textarea name="textarea2" cols="45" rows="8"></textarea>
  </div>
  <div class="fieldset">
	<div class="legend">Text for display</div>
	  <div class="question">
			<div>Your text here: </div>
			<textarea name="textarea2" cols="45" rows="8"></textarea>
	  </div>
	</div>
</div>

<div class="fieldset">
	<div class="legend">Text for display</div>
		<div class="question">
			<div>Your text here: </div>
			<textarea name="textarea2" cols="45" rows="8"></textarea>
		</div>
</div>
</form>
</body>
</html>

[edit2]: It occurred to me that I could use a background image, although I’m not certain how robust of a method this would actually be (it breaks a little on text size changes within browsers).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* start defaults */
	body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td { margin: 0px; padding: 0px; }
	body {
		/*text-align: center;*/
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 100.01%;
		color: black;
	}
	p { margin: .2em 0 .8em 0; }
	ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
	ul, ol { margin-top: .2em; margin-bottom: .8em; }
	
	a img { border: none; }
	td img { display: block; }
	
	table { width: 100%; }
	.biggest { width: 100%; }
	td.smallest, table.smallest { width: 0px; }
	
	.left1 { text-align: left; margin: 0 auto; }
	 img.left1 { float: left; }
	
	.right1 { text-align: right; margin: auto 0; }
	img.right1 { float: right; }
	
	.center1 { text-align: center; margin: 0 auto; }
	.center1 table { margin-left: auto; margin-right: auto; }
	img.centerimage { display: block; text-align: center; margin: 0 auto; }
	
	.top1 { vertical-align: top; }
	
	.bottom1 { vertical-align: bottom; }
/* end defaults */


/* start fieldset stuff */
	.fieldset {
		position: relative;
		border: 1px solid black;
		background-color: #dfe4ee;
		margin: 40px 12px 12px 12px;
		padding: 20px 0px 15px 0px;
	}
	
	.legend {
		position: absolute;
		margin: -32px 0px 0px 12px;
		padding: 0px 3px 0px 3px;
		/*background-color: #dfe4ee;*/
		background: URL("legend_bg.gif") bottom repeat-x;
		font-weight: bold;
		font-size: 115%;
	}
	.fieldset .fieldset {
		background-color: #CAD2E3;
		margin-left: 58px;
		margin-right: 22px;
	}
	
	.fieldset .fieldset .legend {
		/*background-color: #CAD2E3;*/
		background: URL("legend_legend_bg.gif") bottom repeat-x;
	}
/* end fieldset stuff */


/* start fieldset contents */
	form .question {
		color: #555555;
		font-weight: bold;
		margin: 8px 22px 18px 22px;
		padding: 0px 0px 0px 0px;
	}
	
	form .question div {
		padding-bottom: 6px;
	}
	
	form .question textarea {
		margin-left: 12px;
	}
	
	form .question span {
		margin-right: 8px;
	}
	
	form .question .smalltext {
		font-weight: normal;
		font-size: 90%;	
	}
	
	
	form input[type="text"], form textarea, form select {
		border: 1px solid #3b6e22;
	}
/* end fieldset contents */
</style>
</head>

<body>
<form>
<div class="fieldset">
<div class="legend">Text for display</div>
  <div class="question">
	 	<span>This is a question where you select a number?</span>
		<select name="" size="1" >
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
	   </select>
  </div>
  <div class="question">
		<div>Your Text here: </div>
		<textarea name="textarea2" cols="45" rows="8"></textarea>
  </div>
  <div class="question">
		<span>Your Text here again: </span>
		<div class="smalltext">But only if you really want to</div>
		<textarea name="textarea2" cols="45" rows="8"></textarea>
  </div>
  <div class="fieldset">
	<div class="legend">Text for display</div>
	  <div class="question">
			<div>Your text here: </div>
			<textarea name="textarea2" cols="45" rows="8"></textarea>
	  </div>
	</div>
</div>

<div class="fieldset">
	<div class="legend">Text for display</div>
		<div class="question">
			<div>Your text here: </div>
			<textarea name="textarea2" cols="45" rows="8"></textarea>
		</div>
</div>
</form>
</body>
</html>
2

Hi,

John has a good article here on styling legends here that may help you.:slight_smile:

Remember that fieldsets and legends have strong semantic sense whereas div class=“legend” has none at all. So even if you style other elements instead you should still try and keep the legends and fieldsets in your html even if you don’t style them.

They are difficult to style but I can usually make then do what I want with a bit of fiddling around. This is an example I did years ago and still doesn’t hold up too bad. (The p elements should really be div elements but I didn’t know any better back then :slight_smile: ). Regarding the semantics I mentioned earlier there is also an added benefit of using fieldsets and legends and if you turn styles off you will see the form still looks and works like a form.

There are of course some things you can’t style perfectly but that’s the same for all form elements so you have to make the odd allowances here and there :slight_smile:

The display issues you are experiencing in IE sound like “haslayout” issues rather than specific fieldset issues and I’m guessing they could be addressed by the usual methods.

3