css fields problem

hi all,
i have created one simple login form with 5 fields as shown below.
my fields are not in straight line with their corresponding colons.my fields are slightly above their corresponding colons.
kindly tell me how to make fields with their corrresponding colons as equal.
means like the below one...
Username :

below is my html code.......


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<h1>Login Form </h1>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Dynamic Inline Form Validation Demo</title>

<link rel="stylesheet" type="text/css" href="messages1.css" />

<script type="text/javascript" src="messages1.js"></script>

</head>

<body>

<div id="wrapper">

  <form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">

    <label for="name">User Name<span>:</span></label>

    <input type="text"  name="realname" id="name" />

	<span id="realnameerror"></span>

    

	<label for="email">Email Id<span>:</span></label>

    <input type="text"  name="email" id="email" />

	<span id="emailerror"></span>

    

	<label for="password">Password<span>:</span></label>

    <input type="password"  name="password" id="password"  >

	<span id="passworderror"></span>

	

    <label for="repassword">Retype Password<span>:</span></label>

    <input type="password"  name="password2" id="password2" >

	<span id="password2error"></span>

	

	<label for="phoneno">Phone no<span>:</span></label>

    <input type="text"  name="phoneno" id="phoneno" maxlength="10" />

	<span id="phonenoerror"></span>

	

	<input type="submit" value="Submit" class="submit" />

  </form>

</div>

</body>

</html>

below is my css code.......


* 

{

 margin:5; 

 padding:5;

}


body 

{

  font:12px Verdana, Arial, Helvetica, sans-serif; 

  color:black;

}


#wrapper 

{ 

  width:800px; 

  margin:50px auto;

}


.form 

{

  float:left; 

  padding:10px 10px 10px 10px; 

  background:lightblue; 

  border:10px white;

 }


.form label 

{

  position:relative;

  float:left; 

  width:140px; 

  padding:10px 10px 0px 5px;

  font-weight:bold;

  clear:left;

}


.form label span

{

  position:absolute;

  top:0;

  right:5px;

  color:black;

}  


.form span

{

  float:left;

  margin-top:1em;

  margin-left:0.5em;

  color:red;

}


.form select 

{

  float:left; 

  width:146px;

  margin-top:10px;

}


.form input 

{ 

  width:11em;

  float:left; 

  margin-top:10px;

}


.form .submit 

{

    width:auto;

    clear:both;

}