Problem aligning submit button in Firefox

This is a discussion on "Problem aligning submit button in Firefox" within the Web Page Design section. This forum, and the thread "Problem aligning submit button in Firefox are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Aug 15th, 2006, 22:02
AdRock's Avatar
SuperMember

SuperMember
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to AdRock
Problem aligning submit button in Firefox

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: Select all
<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: Select all
 
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.
Attached Files
File Type: txt change-password.txt (2.2 KB, 29 views)

Last edited by AdRock; Aug 15th, 2006 at 22:04.
Reply With Quote

  #2 (permalink)  
Old Aug 16th, 2006, 01:22
Ryan Fait's Avatar
SuperMember

SuperMember
Join Date: May 2006
Location: Las Vegas
Posts: 3,786
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Problem aligning submit button in Firefox

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.
Reply With Quote
  #3 (permalink)  
Old Aug 16th, 2006, 10:04
AdRock's Avatar
SuperMember

SuperMember
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to AdRock
Re: Problem aligning submit button in Firefox

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.
Reply With Quote
  #4 (permalink)  
Old Aug 16th, 2006, 10:13
Rob's Avatar
Rob Rob is offline
Head Admin & CEO

SuperMember
Join Date: Jul 2003
Location: at my desk
Age: 34
Posts: 2,952
Blog Entries: 7
Thanks: 7
Thanked 4 Times in 4 Posts
Send a message via MSN to Rob Send a message via Skype™ to Rob
Re: Problem aligning submit button in Firefox

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.
__________________
Rob - SEO Specialist
Owner & Founder of Webforumz.com

I am currently unavailable for private work
Reply With Quote
Reply

Tags
problem, aligning, submit, button, firefox

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Submit button problems lucyhjones Starting Out 4 Sep 6th, 2007 18:22
Problem with Javascript Back Button in Firefox gorikain JavaScript Forum 4 Jun 25th, 2007 22:23
Aligning form in Firefox Craigj1303 Web Page Design 6 May 26th, 2007 12:17
How can I use a graphic as submit button Sporky Web Page Design 2 Apr 17th, 2007 14:56
Does a submit button have to be in the form itself Sylvester Web Page Design 1 Apr 17th, 2007 12:14


All times are GMT. The time now is 03:15.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43