SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    password textbox size problem

    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>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #5
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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;
    }

  7. #7
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is working .how to take the submit button to the center and right position.
    currently it is left..

  8. #8
    SitePoint Enthusiast Baylisstic's Avatar
    Join Date
    Jul 2010
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •