CSS Form Alignment Issue - html

Question

I am having trouble pushing down, margin and top do not seem to work. and aligning my form. I would like the form (label -> input box) to be below the login text which is the background.
I currently have:
HTML:
<div class="column-right-login">
<form action="http://www.domain.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
<label for="email">Email Address: </label><input type="text" name="email" value="" />
<label for="password">Password: </label><input type="password" name="password" value="" />
<br />
Forgotten Password<br />
<br />
<a onclick="$('#login').submit();" class="button"><span>Login</span></a>
</form>
<script type="text/javascript"><!--
$('#login input').keydown(function(e) {
if (e.keyCode == 13) {
$('#login').submit();
}
});
//--></script>
</div>
CSS:
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
}
Example:
Update:
I now have the code below but I cannot get my form to align:
HTML:
<div class="column-right-login">
<form action="http://www.domain.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
<label for="email">Email Address: </label><input type="text" name="email" value="" />
<label for="password">Password: </label><input type="password" name="password" value="" />
Forgotten Password
<a onclick="$('#login').submit();" class="button"><span>Login</span></a>
</form>
<script type="text/javascript"><!--
$('#login input').keydown(function(e) {
if (e.keyCode == 13) {
$('#login').submit();
}
});
//--></script>
</div>
CSS:
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 30px 0px 0px 10px; /* top right bottom left */
}
Example:

Answer 1

You probably want to use padding:
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 80px 0px 0px 50px; /* top right bottom left */
}
Please be aware that padding adds to height/width, so you will have to adjust them (abstract from current value number of px you use for padding, for example in my example width = 335 - 50 and height = 154 - 80)
If you want to use margin on form and it is not working, just add
display: block;
to the css for the form. I do not remember whether it is default or not - 4AM :)
UPDATE:
to put your inputs where you want, I would suggest wrapping label and input into divs. Then you can adjust position by using margin.
<div style="margin-left: 40px;"><label1 ...><input ...></div>
<div><label2 ...><input ...></div>
of course put styles to CSS :) hope this will work for you.

Answer 2

Hard to tell but it looks like your background-image needs to be positioned.
Try adding something like this to your css:
.column-right-login{
background:url('../image/login.png') no-repeat;
background-position: 0% 20%; //HERE
width:335px;
height:154px;
}
This keeps the image to the left -- the first 0% -- and bumps it down 20%.
Obviously, you can adjust the numbers.