...

View Full Version : password textbox size problem



ravi9510
08-08-2011, 06:43 AM
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>

bullant
08-08-2011, 10:09 AM
hard to tell what is going on since you haven't posted the contents of
messages1.css

ravi9510
08-08-2011, 10:15 AM
below is my css for the above code....
also how to change the submit button position to right and center.
when submit button is in center and if we click it it should not change its position.it should remain there only.same for right side also....


*
{
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:11em;
float:left;
margin-top:10px;
}

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

abduraooft
08-08-2011, 12:41 PM
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
http://www.codingforums.com/showthread.php?t=119002 may help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum