Can't display form border properly

drobby

New Member
i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:login.html:\[code\]<head> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/14449838/css/style.css"></head><div id="login_container"> <form action="#" method="POST"> <div class="row"> <label for="username" class="label">Username</label> <input type="text" class="field" name="username" /> </div> <div class="row"> <label for="password" class="label">Password</label> <input type="password" class="field" name="password" /> </div> </form></div>\[/code\]css/style.css:\[code\]#login_container { margin-top:50px; margin-left: auto; margin-right: auto; width: 300px; border:1px solid black; display:block;}.field { float:right; margin-left: 10px;}label { float:left;}.row{ display:block; clear:both;}\[/code\]and the output:
eKlT6.png
Why does the border cross the password text field?EDIT:with form{ border:1px solid black; }the output is:
3djfE.png
 
Back
Top