legend tag overlaps with the table fields

[whimsical1987]

Hello,

I have a legend tag which is overlapping with the table field in the fieldset tag in firefox. It works fine on safari and chrome. The legend tag is in the extreme left corner

<form id="registerForm" method="post" action="registration_confirm.php">
<fieldset>
	<legend> <span> User Information: </span></legend>
    <table id="tableinfo" width="100%" >
    <tr><td> <label> Username: </label>
    <span class="required"> required </span> </td>
    <td><input id="username" type="text" value="" maxlength="32" name="username" /></td>
    </tr>
    
    <tr> <td>
    <label> Password: </label>
    <span class="required"> required </span> </td>
    <td><input id="password" type="password" value="" maxlength="15" name="password" />
   	</td>
    
    <td>
    <label> Confirm Password:</label>
    <span class="required"> required </span> </td>
    <td><input id="cpassword" type="password" value="" maxlength="15" name="cpassword" />
    </td></tr>
    </table>
</fieldset>

<fieldset>
	<legend> Personal Information: </legend>
    <table id = "tableinfo" width="100%" >
    <tr> <td>
    <label> First Name:</label>
    <span class="required"> required </span> </td>
    <td><input id="fname" type="text" value="" maxlength="32" name="fname" /></td>
    </tr>
    
    <tr> <td>
    <label> Middle Initial:</label>
<!--    <span class="required"> required </span> </td>
-->    <td><input id="mname" type="text" value="" size="4" maxlength="5" name="mname" /></td></tr>
    
    <tr> <td>
    <label> Last Name:</label>
    <span class="required"> required </span> </td>
    <td><input id="lname" type="text" value="" maxlength="32" name="lname" /></td></tr>
    
    <tr> <td>
    <label> Email Address:</label>
    <span class="required"> required </span> </td>
    <td><input id="eaddress" type="text" value="" maxlength="50" name="eaddress" /></td>
    </tr>
    
    <tr> <td>
    <label> Email Confirmation:</label>
    <span class="required"> required </span> </td>
    <td><input id="confirmeaddress" type="text" value="" maxlength="50" name="confirmeaddress" /></td>
    </tr>
    
    <tr><td width="149">
    <label> Bio: </label> </td>
    <!--<span class="required"> required </span> </td>-->
    <td width="259"><textarea name="bio" rows = "3" cols="30" wrap="soft"></textarea> </td></tr>
    
    <tr><td>
    <label> University: </label>
<!--    <span class="required"> required </span> </td>
-->    <td><input id="univname" type="text" value="" maxlength="100" size="40"name="univname" /></td></tr>
    
    <tr><td>
    <label> Country: </label>
<!--    <span class="required"> required </span> </td>
-->    <td><input id="country" type="text" value="" maxlength="32" name="country" /></td></tr>
    
    <tr><td>
    <label> Teaching Experience: </label>
<!--    <span class="required"> required </span> </td>
-->    <td><input id="teachingexp" type="text" value="" maxlength="2" name="teachingexp" /></td></tr>
    
    <tr><td>
    <label> Confirmation:</label>
<!--    <span class="required"> required </span> </td>
-->    <td><input id="confirmation" type="checkbox" name="confirmation" /> Send me a confirmation email including my username and password</td>
    </tr>
    
    <tr> <td>
    <label> Register as</label>
<!--    <span class="required"> required </span> </td>
-->    <td><input id="reader" type="checkbox" name="reader" /> Reader</td></tr>
	   <tr><td></td><td><input id="author" type="checkbox" name="author" /> Author</td>
    </tr>
    
    <tr><td>
    <input id="submit" type="submit" name="submit" value="Submit" />
    <input id="cancel" type="reset" name="cancel" value="Cancel" /></td></tr>
    </table>
    
</fieldset>

<fieldset>
	<legend> Terms & Conditions: </legend>
    <table id = "tableinfo" width="100%" >
    <tr><td>
    	<input id="reader" type="checkbox" name="reader" /> <span class="required"> required </span> I have read and agree to the <a href="#">Terms of Use </a>
    </td></tr>
    </table>
</fieldset>
</form>

#registerForm fieldset {
	border: 1px solid #333;
	float: left;
	margin: 0.7em 0;
	padding: 0 2% 1.75em 18%;
	width: 80%;
	position:relative;
	background-attachment: scroll;
	background-color: #F8F8F8;
	background-image: none;
	background-repeat: repeat;
	background-position: 0 0;
	margin-left:auto;
	margin-right:auto;
}
#registerForm {
	width:90%;
	margin-right:auto;
	margin-left:auto;
}

#tableinfo {
	float:left;
	position:relative;
	padding-top: 1.15em;
}
#registerForm legend {
	color: #999;
	font-size: 1em;
	left: 1em;
	line-height: 1.3em;
	margin: 0;
	padding-top: 1.25em;
	position: absolute;
	width: 16%;
	float:left;
}

#registerForm legend {
	font-weight:bold;
}