password textbox size problem

**ravi951** · Aug 7, 2011 22:46

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.....

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

**chris.upjohn** · Aug 7, 2011 23:46

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.

**ravi951** · Aug 7, 2011 23:53

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........

**chris.upjohn** · Aug 8, 2011 00:05

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.

**ravi951** · Aug 8, 2011 00:12

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.....

Code:

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

**chris.upjohn** · Aug 8, 2011 01:43

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

Code CSS:

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

**ravi951** · Aug 8, 2011 01:53

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

**Baylisstic** · Aug 8, 2011 06:58

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;

Code:

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

User Tag List

Thread: password textbox size problem

Thread Tools

Display

password textbox size problem

Bookmarks

Bookmarks

Posting Permissions