No replies
kojiro
Offline
Regular
Last seen: 17 years 47 weeks ago
Joined: 2004-08-11
Posts: 28
Points: 0

Hi, I'm trying to build a form where the legend is *inside* the fieldset, rather than overlapping the border. I need each fieldset to appear with a full-length top border, but when I try to use CSS to move the legend, it leaves a space in the border behind where the legend used to be.

All of the following I've checked in firefox. I haven't even begun to worry about the other browsers yet. (ugh)

Attempt 1:

fieldset { 
	margin:0;  
	padding: 0; 
	border-style: none; 
	border-top: 1px solid #999; 
	position: relative; 
} 
legend { 
	position: absolute; 
	top: 3em; 
	font-weight: bold; 
	color: #999; 
} 


That didn't work, so I tried to trick the CSS by removing the fieldset border, and having the legend emulate the border itself:

fieldset { 
	margin:0;  
	padding: 0; 
	border-style: none; 
} 
legend { 
	display: block; 
	width: 464px !important; /* this should be 100% of the form width, if I had my druthers */ 
	border-top: 8px solid #999; 
	padding-top: .5em; 
	font-weight: bold; 
	color: #999; 
} 


But I can't seem to get the width of the legend to change. Is this a browser implementation oversight, or were there different rules for CSS for forms that I missed?

All the good sigs were taken.