INPUT text field too wide

  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

Here comes another question :)
I have a small login form (2 input fields). However the whole thing appears too wide. I tried setting the width in CSS but still no luck. I also change the maximum lenght of the field but the apperant width did not decrease.
Any ideas ?
Here is the code:
Code: [ Select ]
div.loginBox
{
  width: 65px;//the actuall size is 150px
  margin-left: 1em;
  float: right;
  height: 150%;
}
input.login
{
  width: 40px;//tried to make the field smaller still no luck
}
  1. div.loginBox
  2. {
  3.   width: 65px;//the actuall size is 150px
  4.   margin-left: 1em;
  5.   float: right;
  6.   height: 150%;
  7. }
  8. input.login
  9. {
  10.   width: 40px;//tried to make the field smaller still no luck
  11. }

Here is the HTML code:
Code: [ Select ]
<div class="loginBox">
   <form action="login.php">
     UserID:<input type="text" id="UserID" maxlenght="15" />
     Pass:<input  type="password" id="UserPass" maxlenght="15" />
     <input type="button" value="submit" />
     <img class="loginBanner" src="" alt="banner" />
   </form>
   </div>
  1. <div class="loginBox">
  2.    <form action="login.php">
  3.      UserID:<input type="text" id="UserID" maxlenght="15" />
  4.      Pass:<input  type="password" id="UserPass" maxlenght="15" />
  5.      <input type="button" value="submit" />
  6.      <img class="loginBanner" src="" alt="banner" />
  7.    </form>
  8.    </div>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

Code: [ Select ]
<div class="loginBox">
   <form action="login.php">
     UserID:<input type="text" id="UserID" maxlenght="15" size="15" />
     Pass:<input  type="password" id="UserPass" maxlenght="15" size="15" />
     <input type="button" value="submit" />
     <img class="loginBanner" src="" alt="banner" />
   </form>
   </div>
  1. <div class="loginBox">
  2.    <form action="login.php">
  3.      UserID:<input type="text" id="UserID" maxlenght="15" size="15" />
  4.      Pass:<input  type="password" id="UserPass" maxlenght="15" size="15" />
  5.      <input type="button" value="submit" />
  6.      <img class="loginBanner" src="" alt="banner" />
  7.    </form>
  8.    </div>


notice the size attribute. THough, it's easier to add a style to the style sheet for the text field.

Style:
Code: [ Select ]
.text_field_large {
    width    : 300px;
    font-size  : 10px;
    font-family : Verdana, Helvetica;
    font-color  : #651618;
    border    : 1px solid #651618;

}
  1. .text_field_large {
  2.     width    : 300px;
  3.     font-size  : 10px;
  4.     font-family : Verdana, Helvetica;
  5.     font-color  : #651618;
  6.     border    : 1px solid #651618;
  7. }


Code: [ Select ]
<input type='text' name='username' class='text_field_large'>
[/code]

It allows more control.
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

I think that is exactly what I did ... stupid me :)
I never applied the class in the HTML.
Maybe I should start working on this site during the day .... ;)
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

maybe I should refrain from reading the board while drinking, lol.
I totally disregarded your stylesheet :)

[edit] Oh wait, no I saw you had applied it to the div and didn't realize you meant to apply it to the text boxes themselves[/edit]

phew
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Make sure you spell "maxlenght" as "maxlength" or it will be ignored. :wink:.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 83 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.