Password textbox size problem

HTML & CSS
1

hi all,
i am using a simple login page with 5 fields shown below.in my login page below only the password and retype password fields textbox size decreased as compared to other fields…
kindly tell me what happened and how to solve it…
below is the page with 5 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>
<h2>Login Form </h2>
<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>
2

Without a link to the actual page it’s not possible to assist you as you have given us no CSS source to look at.

3

actually it is working fine in chrome browser but in IE 8 it is displaying only the
passwords fields small.
whats problem with IE 8 browser…

4

ravi please ensure to read replies more carefully, i said it’s not possible for us to help you without any CSS to look at. Until you supply us with the CSS you won’t be able to get any help from us.

5

here is my css code.now i have given input field as
.form input
{
width:10em;
}
now the password field is ok but my submit button size is also increased.as shown below…
but i want my submit button size as it is i.e., size of submit button only.
it should not take extra space…


* 
{
 margin:0; 
 padding:0;
}

body 
{
  font:12px Verdana, Arial, Helvetica, sans-serif; 
  color:black;
}

#wrapper 
{
  width:700px; 
  margin:50px auto;
}

.form 
{
  float:left; 
  padding:10px 10px 10px 10px; 
  background:lightblue; 
  border:2px solid white;
 }

.form label 
{
  position:relative;
  float:left; 
  width:130px; 
  /*padding:10px 10px 0 0; */
  padding:10px 10px 0px 5px;
  font-weight:bold;
  /*text-align:right; */
  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:10em;
  float:left; 
  margin-top:10px;
}

.form .submit 
{
 /* position:relative;
    left:50%;           for center */
    clear:both;
}
6

All you need to do is simply add the width property with a value of auto like the below example.

.form .submit {
    clear: both;
    width: auto;
}
7

it is working .how to take the submit button to the center and right position.
currently it is left…

8

According to your css, you can center your submit button by setting left to 50% - however this has been commented out. If you want it to the right simply use float:right;

.form .submit 
{
[COLOR="Red"] /* position:relative;
    left:50%;           for center */[/COLOR]
    clear:both;
}