Making cutom fieldset and legend with CSS

Is there a way to change the default CSS to the fieldset and legend tags and create something like the above screen, but that should be cross-browser compatible. I tried with various CSS tricks, but it behaves very differently in various browsers.

Can you link to the image instead of attaching it? That way it’ll be visible.

Sure, here is a link then: http://dl.dropbox.com/u/22445233/fieldset-elements.png

I’ll give it a go. What have you tried so far?

Yes, I see what you mean. It behaves differently in different browsers.

Hi,

Here’s an old example that should help and works all the way back to IE6.

You have to jump through a few hoops but I think you should be able to work it out - if not just shout and I will explain in detail :slight_smile: Of course I also cheated and used an inner div for the border rather than the fieldset because it works much better cross browser.

You can do it with the fieldset but you have to tweak it for all browsers to get it right and its a pain.


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.mainform fieldset {
	background: #ecf8d7;
	border:1px solid #608f22;
	margin:40px 0 10px;
	padding:0;
	position:relative;
}
.mainform legend {
	font-weight: bold;
	background: #ecf8d7;
	margin:0;
	display:block;
	position:relative;
	height:2em;
	line-height:2em;
	border:1px solid #608f22;
	border-bottom:none;
	color:#000;
	padding:0 30px;
	left:-1px;
	top:-1px;
	margin:-2em 0 0 0;
	float:left;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.mainform fieldset{zoom:1.0}
.mainform legend{margin:-2.5em 0 0 -8px;left:0;top:-2px}
</style>
<![endif]-->
</head>
<body>
<h1>Fieldset test</h1>
<form class="mainform" name="form1" id="form1" method="post" action="">
		<fieldset>
				<legend>Testing</legend>
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
		</fieldset>
</form>
</body>
</html>


This will also help and explain the issues.

I’m glad you stopped in, Paul. I was working on it but couldn’t sit at the computer for long. I’ve got to get a laptop while I’m healing. :slight_smile:

No worries hope you get better soon :slight_smile:

Luckily I have loads of old demos lying around so I can usually adapt something quickly.