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;
}

Hi,

You never want to do this:


*  {  margin:5;   padding:5; }

Notwithstanding that you have missed the units from the dimensions so some browsers will treat as zero anyway but as a general rule you never want to do that.

By all means set everything to zero (although more specific resets are better) but not to some arbitrary figure.

I wouldn’t float the inputs as that is too awkward especially in ie7 and under which won’t clear each row. I’d use inline-block as in this example which lines up neatly.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.formtest {
    width:350px;
    margin:auto;
}
.formtest label {
    display:inline-block;
    vertical-align:middle;
    width:90px;
    text-align:right;
    margin:10px 0;
}
.formtest input {
    width:200px;
    margin:10px 0;
    vertical-align:middle;
}
.gender label{text-align:left;margin:0}
.gender input{width:auto;margin:0 10px 0 90px}
</style>
</head>
<body>
<form  class="formtest" id="form1" method="post" action="">
    <fieldset>
    <legend>Address Details</legend>
    <label for="firstname">First Name:</label>
    <input type="text" name="firstname" id="firstname" />
    <br />
    <label for="lastname">Last Name:</label>
    <input type="text" name="lastname" id="lastname" />
    <br />
    <label for="address1">Address 1:</label>
    <input type="text" name="address1" id="address1" />
    <br />
    <label for="address2">Address 2:</label>
    <input type="text" name="address2" id="address2" />
    <br />
    <label for="address3">Address  3:</label>
    <input type="text" name="address3" id="address3" />
    <br />
    <label for="address4">Address 4:</label>
    <input type="text" name="address4" id="address4" />
    <br />
    <label for="city">City:</label>
    <input type="text" name="City" id="city" />
    <br />
    <label for="state">State:</label>
    <input type="text" name="state" id="state" />
    <br />
    <label class="zip" for="zip">Zip:</label>
    <input type="text" name="zip" id="zip" />
    <br />
    <label for="tel">Telephone:</label>
    <input type="text" name="tel" id="tel" />
    <br />
    </fieldset>
    <fieldset class="gender">
    <legend>Enter Gender</legend>
    <input type="radio" name="radio" id="rad1" value="rad1" />
    <label for="rad1">Male</label>
    <br />
    <input type="radio" name="radio" id="rad2" value="rad2" />
    <label for="rad2">Female</label>
    <br />
    <input type="radio" name="radio" id="rad3" value="rad3" />
    <label for="rad3">Not sure</label>
    <br />
    </fieldset>
</form>
</body>
</html>


There’s a more advanced version here.

k coming to my code whats wrong with that.
tell me where to modify in my code.

Paul gave you the example, have a look through it. You need to change the display to inline-block for a start.
It’s no good us just changing the code for you, try to implement the changes and if your still having problems come back :slight_smile:

Im not much of a css expert but , Going by Paul’s method ,
You might want to check the closing tags on your input fields,
place a <br/> where you want to move on the next line
get rid of all the floats
use - display:inline-block; for .form label

This works for me somehow.

here is the css


* 
{
 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 .submit 
{
    width:auto;
    clear:both;
}


.form label 
{

  width:140px; 
  padding:10px 10px 0px 5px;
  font-weight:bold;
  display:inline-block;
  

}
.form input 
{ 
  width:11em;
  margin-top:10px;
  clear:both;

}



.form label span
{

  top:0;
  right:5px;
  color:black;
}  

.form span
{
  margin-top:1em;
  margin-left:0.5em;
  color:red;
     
}

.form select 
{

  width:146px;
  margin-top:10px;
}

here is your html


<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><br />
    
	<label for="email">Email Id<span>:</span></label>
    <input type="text"  name="email" id="email" />
	<span id="emailerror"></span><br />
    
	<label for="password">Password<span>:</span></label>
    <input type="password"  name="password" id="password"  />
	<span id="passworderror"></span><br />
	
    <label for="repassword">Retype Password<span>:</span></label>
    <input type="password"  name="password2" id="password2" />
	<span id="password2error"></span><br />
	
	<label for="phoneno">Phone no<span>:</span></label>
    <input type="text"  name="phoneno" id="phoneno" maxlength="10" />
	<span id="phonenoerror"></span><br />
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>

I already told you :slight_smile:

Don’t use floats - use inline-block instead.

Don’t use * {margin:5px;padding:5px}

tell me where to modify in my code.

Usually I would say no because you must really try this for yourself as already mentioned. You have all the information to hand to make a stab for yourself.

Seeing as I had already converted this I will paste it now but in future please make an attempt yourself first.:slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="messages1.css" />
<script type="text/javascript" src="messages1.js"></script>
<style type="text/css">
html, body, table {
    margin : 0;
    padding : 0;
    font-size : 100%;
}
object, iframe, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, fieldset, form, legend, table, caption, th, td {
    margin : 0;
    padding : 0;
    border :none;
}
body {
    font :12px Verdana, Arial, Helvetica, sans-serif;
    color :black;
    line-height :1.3;
}
#wrapper {
    width :800px;
    margin :50px auto;
}
.form {
    float :left;
    padding :10px;
    background :lightblue;
    border :10px solid white;
}
.form legend{padding:0 0 20px}
.form label {
    position :relative;
    display :inline-block;
    vertical-align:middle;
    width :140px;
    padding :0 10px 0 5px;
    font-weight :bold;
    margin :5px 0;
    text-align :right;
}
.form label span {
    position :absolute;
    top :0;
    right :5px;
    color :black;
    margin :0;
}
.form span {
    display :inline-block;
    vertical-align:middle;
    margin-left :0.5em;
    color :red;
}
.form select {
    display :inline-block;
    vertical-align:middle;
    width :146px;
    margin :5px 0;
}
.form input {
    width :11em;
    display :inline-block;
    vertical-align:middle;
    margin :5px 0;
}
.form .submit {
    width :auto;
    clear :both;
}
</style>
</head>
<body>
<div id="wrapper">
    <form  id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
        <fieldset>
        <legend>Dynamic Inline Form Validation Demo</legend>
        <label for="name">User Name :</label>
        <input type="text"  name="realname" id="name" />
        <span id="realnameerror">hello</span><br />
        
        <label for="email">Email Id :</label>
        <input type="text"  name="email" id="email" />
        <span id="emailerror">hello2</span><br />
        
        <label for="password">Password :</label>
        <input type="password"  name="password" id="password" />
        <span id="passworderror"></span><br />
        
        <label for="password2">Retype Password :</label>
        <input type="password"  name="password2" id="password2" />
        <span id="password2error"></span><br />
        
        <label for="phoneno">Phone no :</label>
        <input type="text"  name="phoneno" id="phoneno" maxlength="10" />
        <span id="phonenoerror"></span><br />
        
        <input type="submit" value="Submit" class="submit" />
        </fieldset>
    </form>
</div>
</body>
</html>