alignment issue with login form

[priyaa2002]

I'm trying to create a login page exactly same as


There is a white space/line below the legend.
space above the check box
"Forgot your password" is not aligned center.

Here is the result page


Here is the code Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

Any insight to achieve the result

[priyaa2002]

desired result
http://dragonfly.zymichost.com/images/bug1.jpg

[ralph.m]

Try adding

fieldset {padding:0}

to your CSS.

The "forgot password" text is centered, but in your image the form is a bit off center. See if the above CSS fixes it. For me, it's all centered.

[priyaa2002]

Thanks. padding: 0 fixed the problem. But there is space between the chkbox and "Remember my pswd". how to fix that??

[ralph.m]

There are big top and bottom margins on the button:

.sign-btn {
  margin-bottom: 30px;
  margin-top: 20px;
}

Reduce those to reduce the spacing.

[priyaa2002]

Ralph I'm not talking about that space.. there is a horizontal space between chkbox and the phrase "Remember my username"

[ralph.m]

Oh, thorry.

It's the default margin on the input. You could change this

input[type=checkbox]{
    margin-left: -10px;
    text-align: left;
}

to

input[type=checkbox]{
    margin: 0 0 0 -10px;
    text-align: left;
}

or better (I think)

input[type=checkbox]{
    margin: 0;
    text-align: left;
}