Problem aligning submit button in Firefox

AdRock · August 15th, 2006, 06:02 PM

I am havign a problem aligning a submit button on one of my forms

I have pretty much the same code for my registration and login form which both work perfectly in IE and Firefox but this particlular form is causing problems.

The first 2 password fields are aligned properly but the submit button in Firefox is indented quite a lot. It's like the label for the submit button is directly underneath and inline with the 2nd password input box.

In IE it works properly but not in Firefox

HTML Code:

<form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
<p class="style3"><label for="password1"">Password:</label>
<input type="password" title="Please enter a password" name="password1" size="30"></p>
 
<p class="style3"><label for="password2">Re-enter Password:</label> [/left]
<input type="password" title="Please re-enter password" name="password2" size="30"></p>
 
<p class="style3"><label for="submit">&nbsp</label>
<input type="submit" value="Change" class="submit-button"/></p>
</form>

Here is the CSS that is applied to the form

Code:

 
label { 
 
width: 70px;  
float:left; 

display:block; 
text-align: right; 
margin-right: 5px;
} 
.submit-button { 
width: 80px; 
background-color: #E4EFFF; 
border: 1px #C0C0C0 outset; 
font-family: Arial; f
ont-size: 11px;
} 
.style3 { 
font-family: Arial, Verdana ; 
font-size: 11px; 
color: #000000; 
margin-top: 10px; 
margin-bottom: 10px; 
text-align: justify;
}

I have included the file that is causing problems if anyone wants to test it in Firefox so you can see what I mean.

Ryan Fait · August 15th, 2006, 09:22 PM

I would rather see a link. And you don't need labels on submit buttons, especially not a label with a space in it. Try removing the label and take out the text-align: justify. It's useless and it might be the culprit.

AdRock · August 16th, 2006, 06:04 AM

All fixed now...!

I need the labels in there to position the input boxes and submit button

I did however take out the text-align right and changed it to left and it now works. If i took it out altogether it would center.

Rob · August 16th, 2006, 06:13 AM

You definitly dont need a label for the submit button....

Just assign the submit button an id and then either use text-indent, or left margin to align it.