Creating a Form - Fieldset and Legend issues

Get Started
1

Hello everyone,

I am trying to build an HTML/CSS form from scratch.

However, I want to bring the legend within the fieldset rather then the legend sitting on the fieldset.

To get this done, I gave the fieldset a top padding and the legend an absolute position. However the fieldset appeared to have a break as indicated in the red circle of the below image. How can I close or prevent this gap/break?

Here is the complete code.


<style type="text/css">

form{
	margin: 0;
	padding: 0;
	font-family: "Century Gothic";
	font-weight: bold;
	font-size: 16px;
}

legend span{
	position: absolute;
	top: 30px;
}

fieldset{
	background-color: #EAEAEA;
	padding-top: 60px;
}

div{
	width: 100%;
	margin: 0 0 5px 0;
	padding: 0;
}

label {
	float: left;
	width: 160px;
	margin-right: 16px;
	text-align: right;
	margin-top: 5px;
}

.UserFirstNameField, .UserLastNameField, .UserEmailField, .UserPhoneNumberField{
	width: 200px;
	padding: 4px;
	font-family: "Century Gothic";
	font-weight: bold;
	font-size: 16px;
	color: #F90;
	background-image: url(DFormsImages/Form-Fields-Background-Image.png);
	background-repeat: repeat-x;
	background-position: left center;
	border: 1px solid #D5D5D5;
}

</style>


<!--[if lte IE 7]>    
<style type="text/css" media="all">  
label {
	margin-top: 5px;
}  
</style>    
<![endif]-->

</head>

<body>

<form id="BasicForm" class="BasicFormTemplate" method="post" action="">

<fieldset>
<legend><span>Personal Information</span></legend>

<div>  
<label for="UserFirstName">First Name:</label>  
<input id="FirstNameInput" name="UserFirstName" class="UserFirstNameField" type="text" />  
</div>


  
<div>
<label for="UserLastName">Last Name:</label>  

<input id="LastNameInput" name="LastName" class="UserLastNameField" type="text" />  
</div>

  
<div>
<label for="UserEmail">Email:</label>  
<input id="UserEmailInput" name="UserEmail" class="UserEmailField" type="text" />  
</div>

  
<div>
<label for="UserPhoneNumber">Phone Number:</label>  
<input id="UserPhoneNumberInput" name="UserPhoneNumber" class="UserPhoneNumberField" type="text" />
</div> 

</fieldset>

</form>

</body>
</html>

Thanks everyone!

IC

2
Off Topic:

I figured that might be the case!

3
Off Topic:

Me gusta mucho el futbol, porque Holandia está allá!

4

Nor have I. But nor have I ever moved the legend (hadn’t even though of it, to be honest).

Off Topic:

No tengo gusto de mirar futbol

5

Heh, I’ve never tried to remove that little gap before. Cool. : )

6

Works in IE6 too. I just checked. :wink:

7

That works well, tested in IE7, Firefox 3.6.6, Safari 5.0 and Opera 10.60.

I do not have IE6.

Thanks very much for the help!

IC

8

You could try

legend {padding:0;}

Works in Firefox, but I can’t vouch for other browsers.