below is my complete css script....
also i have given my html script with fields....
for all the fields given in html it must display in same order...
*
{
margin:0;
padding:0;
}
body
{
font:12px Verdana, Arial, Helvetica, sans-serif;
color:black;
}
#wrapper
{
width:600px;
margin:50px auto;
}
.form
{
float:left;
padding:10px 10px 10px 10px;
background:lightblue;
border:2px solid white;
}
.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px;
font-weight:bold;
clear:left;
}
.form select
{
float:left;
width:146px;
margin-top:10px;
}
.form input
{
float:left;
margin-top:10px;
}
.form .submit
{
clear:both;
}
#msg
{
display:none;
position:absolute;
z-index:200;
background:url(images/msg_arrow.gif) left center no-repeat;
padding-left:7px;
}
#msgcontent
{
display:block;
background:#f3e6e6;
border:2px solid red;
border-left:none;
padding:5px;
min-width:150px;
max-width:250px;
}
[
below is my html code with fields.....
<!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>
<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="messages.css" />
<script type="text/javascript" src="messages.js"></script>
</head>
<body>
<div id="wrapper">
<form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
<label for="name">Full Name:</label>
<input type="text" name="name" id="name" />
<label for="email">Email Address:</label>
<input type="text" name="email" id="email" />
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
<label for="repassword">Retype Password:</label>
<input type="text" name="repassword" id="repassword" />
<label for="phoneno">Phone no:</label>
<input type="text" name="phoneno" id="phoneno" />
<input type="submit" value="Submit" class="submit" />
</form>
</div>
</body>
</html>