Problem with login box

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

Post 3+ Months Ago

I have this login box:
Code: [ Select ]
<div class="loginBox">

   <form >
     UserID:<input class="login" type="text" id="UserID" maxlenght="30" />
     Pass:<input  class="login" type="password" id="UserPass" maxlenght="30" />
     <input type="button" value="submit" onclick="login.php" />
   </form>
</div>
  1. <div class="loginBox">
  2.    <form >
  3.      UserID:<input class="login" type="text" id="UserID" maxlenght="30" />
  4.      Pass:<input  class="login" type="password" id="UserPass" maxlenght="30" />
  5.      <input type="button" value="submit" onclick="login.php" />
  6.    </form>
  7. </div>

The problem is that the input fields appear all on the same line. Also the whole box seems to be wider than what it is supposed to be. And lastly the borders of the box are not visible.
Here is my CSS:
Code: [ Select ]
div.loginBox
(
  width: "10%";
  border: 1 solid black;
  margin-right: "2em";
}
input.login
{
  width: "65px";
  align: "center";
  clear: "left";
  clear: "right";
}
  1. div.loginBox
  2. (
  3.   width: "10%";
  4.   border: 1 solid black;
  5.   margin-right: "2em";
  6. }
  7. input.login
  8. {
  9.   width: "65px";
  10.   align: "center";
  11.   clear: "left";
  12.   clear: "right";
  13. }

The css is being included and used properly. Also I tried to test this box in separate file all by itself but I'm still getting the same results.
Any ideas ??
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

put a break <br /> after the forms like this
Code: [ Select ]
<div class="loginBox">

   <form >
     UserID:<input class="login" type="text" id="UserID" maxlenght="30" /><br />
     Pass:<input  class="login" type="password" id="UserPass" maxlenght="30" /><br />
     <input type="button" value="submit" onclick="login.php" />
   </form>
</div>
  1. <div class="loginBox">
  2.    <form >
  3.      UserID:<input class="login" type="text" id="UserID" maxlenght="30" /><br />
  4.      Pass:<input  class="login" type="password" id="UserPass" maxlenght="30" /><br />
  5.      <input type="button" value="submit" onclick="login.php" />
  6.    </form>
  7. </div>

Then they wont all be on the same line
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

Your Code:(CSS)
Code: [ Select ]
div.loginBox
(
  width: "10%";
  border: 1 solid black;
  margin-right: "2em";
}
input.login
{
  width: "65px";
  align: "center";
  clear: "left";
  clear: "right";
}
  1. div.loginBox
  2. (
  3.   width: "10%";
  4.   border: 1 solid black;
  5.   margin-right: "2em";
  6. }
  7. input.login
  8. {
  9.   width: "65px";
  10.   align: "center";
  11.   clear: "left";
  12.   clear: "right";
  13. }



The Correct Code:(CSS)
Code: [ Select ]
div.loginBox
{
  width: "10%";
  border: 1 solid black;
  margin-right: "2em";
}
input.login
{
  width: "65px";
  align: "center";
  clear: "left";
  clear: "right";
}
  1. div.loginBox
  2. {
  3.   width: "10%";
  4.   border: 1 solid black;
  5.   margin-right: "2em";
  6. }
  7. input.login
  8. {
  9.   width: "65px";
  10.   align: "center";
  11.   clear: "left";
  12.   clear: "right";
  13. }


See if you can figure out what I fixed, it was very simple. :lol:

And do what he said about the < br > thing. ;)
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

hei I got it !! @ line 2
thanks a bunch.
I also put the
Code: [ Select ]
<br />
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Hacker007 wrote:
The Correct Code:(CSS)
Code: [ Select ]
div.loginBox
{
  width: "10%";
  border: 1 solid black;
  margin-right: "2em";
}
input.login
{
  width: "65px";
  align: "center";
  clear: "left";
  clear: "right";
}
  1. div.loginBox
  2. {
  3.   width: "10%";
  4.   border: 1 solid black;
  5.   margin-right: "2em";
  6. }
  7. input.login
  8. {
  9.   width: "65px";
  10.   align: "center";
  11.   clear: "left";
  12.   clear: "right";
  13. }



Sorry, but this CSS is not correct. The values should not be quoted. Also, clear:right would override clear:left. You want to use clear:all. Also, length measurement must have units, so I'll assume you meant px on the border. I changed 75px to some value using ems because if the user uses a significantly larger font size, he would appreciate having the input box enlarge as well. (some fiddling with the width in ems might be desired)

Code: [ Select ]
div.loginBox
{
  width: 10%;
  border: 1px solid black;
  margin-right: 2em;
}
input.login
{
  width: 8em;
  align: center;
  clear: all;
}
  1. div.loginBox
  2. {
  3.   width: 10%;
  4.   border: 1px solid black;
  5.   margin-right: 2em;
  6. }
  7. input.login
  8. {
  9.   width: 8em;
  10.   align: center;
  11.   clear: all;
  12. }
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

Thanks for you reply Sam. The points you brought up are valid and I will take care of the errors. The thing is I'm a bit sloppy while putting the site together, but once I am done I go through the code and fix that kind of errors.
Thanks once again for your reply.
ventsyV

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 86 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
 
cron
 

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