Thread

I’m not 100% certain that this is a CSS problem but I thought it would be a reasonable forum to post my question.  The question relates to a strange display issue seen in custom login form.

Let’s start with here:

Linky 1

You can see my login form in the upper right.  Not too shabby but its not operational at the moment because I have removed the {exp:member:login_form} code which appears to be causing an issue.

Here’s a duplicate of the page but with the form containing the {exp:member:login_form} code.  That’s the only difference between the two examples.  Notice the padding or gap in front of Username:

Linky 2

Looking at the code view of the page I see EE inserts some hidden fields in a <div>.  Is the <div> causing this spacing problem? 

<form method="post" action="http://www.budomembership.com/ee/index.php"  >

<div>
<input type="hidden" name="XID" value="27efe545a27705b3f6b72e21375d5ad5d6c6f247" />
<input type="hidden" name="ACT" value="9" />
<input type="hidden" name="RET" value="index.php/budo_membership/" />
<input type="hidden" name="site_id" value="1" />
</div>

     
<label>Username</label>
<input type="text" name="username" value="" maxlength="32" class="input" size="15" />
<input class='checkbox' type='checkbox' name='auto_login' value='1' />
Remember me 


<label>Password</label>
<input type="password" name="password" value="" maxlength="32" class="input" size="15" />
<input type="submit" name="login" value="Login" />
</form>

Thank you very much in advance for your feedback.  I’d like to add that as a new EE user, I’ve been impressed with the vibrancy and comradeship shown by the EE developer community.

It seems to me the difference between the two is your <form> tags.  One is present while the other isnt.  Check your styles for that tag.  I noticed you styled it.

Sorry man, I dont have time to test for you at the moment.

The hidden fields in between the <div> shouldn’t be a problem, well because there are hidden.

After looking again, I didn’t describe the issue correctly.  There isn’t a gap in front of Username, something has shifted the Password field back a bit, causing the lack of alignment.

Thanks for the reply.  Following your suggestion, I added <form> tag to the “working” example to see if it causes the problem but it doesn’t.

Oh and the only styling I have for <form> is:

#signin form {
    margin: 0px;
    padding: 0px;

My bad.  You’re right.  That <div> does add the space.  Can I look at your EE code?

Thanks for taking an interest in this.  Here’s the embed file for the header area where the form is displayed:

<div id="header">
  <div id="signin">
     {exp:member:login_form return="index.php/budo_membership/"}     
     <label>Username</label>
     <input type="text" name="username" value="" maxlength="32" class="input" size="15" />
     <input class='checkbox' type='checkbox' name='auto_login' value='1' />
     Remember me 

     <label>Password</label>
     <input type="password" name="password" value="" maxlength="32" class="input" size="15" />
     <input type="submit" name="login" value="Login" />
     {/exp:member:login_form} 
     

     <label></label>
     <a href="http://{path=member/forgot_password}">Forgot your password?</a> 
  </div>

<h1>BudoMembership.com Martial Arts Brazilian Jiu Jitsu MMA</h1>
</div>

I think it’s where your form tag begins.  Right above div#header.  Can I see that?

Ok, I am totally missing it today.  Sorry man.  I see your form tag now.

Take out the .php extension, because its going to your index/budo_membership template right?  But that’s not the issue.  Im still looking.

Alright fixed it.  Just do this and you’ll be straight.  Apparently you cant escape EE placing that <div> container in there, and I don’t know why, so in your code add a line break after the EE login_form tag:

{exp:member:login_form return="index/budo_membership/"}  



   
<label>Username</label>
<input type="text" name="username" value="" maxlength="32" class="input" size="15" />
<input class='checkbox' type='checkbox' name='auto_login' value='1' />
Remember me 

<label>Password</label>
<input type="password" name="password" value="" maxlength="32" class="input" size="15" />
<input type="submit" name="login" value="Login" />
{/exp:member:login_form}

Then in your CSS get rid of the top padding for #signin.

#header #signin {
    float: right;
    padding-right: 10px;
}

And that should fix it.  Sorry for the brain farts man.  This is just an off day for me.

Excellent fix!  My thanks.  Now, why would a simple
fix my problem?  Wait.  Actually, I don’t want to know.  😊

LOL!  Glad it worked.