Alignment issue with login form

HTML & CSS
1

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

2

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

3

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.

4

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

5

There are big top and bottom margins on the button:

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

Reduce those to reduce the spacing. :slight_smile:

6

Ralph I’m not talking about that space… there is a horizontal space between chkbox and the phrase “Remember my username”

7

Oh, thorry. :blush:

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;
}