Menu
Hello Everyone:
I am crating a table for a registration page.
1. The row for username and input text box is not centered. I couldn’t figure out what I did wrong. Please review my code and give me some advises on how to correct it.
2. In IE7 the username cell and input box cell are further apart. Please advise how to make the table look identical in Firefox and IE.
Thanks in advance.
HTML Code:
[code]
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”main.css” />
<title>User Registration Page</title>
</head>
<body>
<form name=”registration” id=”registration” method=”post” action=”validation.php”>
<table width=”600″ align=”center” cellspacing=”0″ cellpadding=”0″>
<tr>
<th colspan=”2″>User Registration Page</th>
</tr>
<tr><td colspan=”2″> </td></tr>
<tr><td colspan=”2″> </td></tr>
<tr>
<td class=”frmelement” width=”150px”>User Name*:</td>
<td><input class=”frm_input” type=”text” name=”user_name” id=”user_name” maxlength=”20″ value=”” /></td>
</tr>
<tr>
<td colspan=”2″ class=”submission”>
<input type=”submit” value=”Submit” />
<input type=”reset” value=”Cancel” />
</td>
</tr>
<!–
–>
<tr>
<td>
<ul class=”notice”>
<li>Note: User name and password must be alphanumeric (e.g. trancos08)</li>
<li>password length must be 6 characters or more</li>
<li>register with your coregmedia or trancos email account</li>
<li>fileds with asterisk sign are required</li>
<ul>
</td>
</tr>
</table>
</form>
</body>
</html>
CSS code
[code]
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #cc9;
}
table{
border: 1px dotted #333;
}
.frmelement{
width: 150px;
font-size: 12px;
text-align: right;
/* margin-left: 120px; */
}
.frm_input{
width: 200px;
height:20px;
margin-left: 0.5em;
margin-bottom: 5px;
}
.submission{
width: 200px;
float: left;
text-align: right;
margin-left: 120px;
}
.notice{
margin-top: 5px;
margin-left: 120px;
font-size: 9px;
color: #c60;
}