Misaligned Submit Button

isleofman · 07-06-2011, 06:22 AM

Do any questions get answered here?

How would I get a simple input form to align with a submit button?

You can see the problem at: http://bit.ly/ovFGhR
The CSS txt file: http://bit.ly/nMyP45

My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned.

Please help!!

Sammy12 · 07-06-2011, 06:38 AM

Code:

  padding: 7px 25px;

The width is set to 100% since its a block element. By adding 25px to the left and right, you are making it more than a 100%;, therefore margin: auto; will not center correctly.

Set a width for the apply button = (100% width - 50px) and use margin: auto;

Code:

 width: 700px;
 margin: auto;

isleofman · 07-06-2011, 06:48 AM

Thanks for your swift reply!

I tried that but it hasnt worked:

Code:

#reg form button {
	border:none;
	outline:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    cursor: pointer;
	float: left;
    clear: both;
    padding: 7px 25px;
	width: 100% 50px;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:"Century Gothic", Helvetica, sans-serif;
    font-size:22px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background:#4797ED;
}

Sammy12 · 07-06-2011, 06:50 AM

Quote:

Originally Posted by isleofman

Thanks for your swift reply!

I tried that but it hasnt worked:

Code:

#reg form button {
	width: 100% 50px;
}

that's not actually valid css

try

Code:

width: 700px;
margin: auto;
padding: 7px 25px;

+

take out float: left;

then upload to your server so i can see the changes

isleofman · 07-06-2011, 06:56 AM

Sorry - mental breakdown on that wonderful 100% 50px;!?

I've done that now but the text input box is still riding above the submit

Sammy12 · 07-06-2011, 07:18 AM

Quote:

Originally Posted by isleofman

Sorry - mental breakdown on that wonderful 100% 50px;!?

I've done that now but the text input box is still riding above the submit

Did I wake up just for this? yes, yes i did.
I told you the wrong width 1 sec

Sammy12 · 07-06-2011, 07:20 AM

Code:

#reg form button {
    float: none;
    margin: auto;
    border:none;
    outline:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    cursor: pointer;
    clear: both;
    padding: 7px 25px;
    width: 115px;
    margin: center;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:"Century Gothic", Helvetica, sans-serif;
    font-size:22px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background:#4797ED;
}

margin: auto; sets an equal margin on both sides so that it's center. I looked at your script and margin: center does not exist.

the code ^ should work

Yes, I was sleeping then I woke up and was like, "wait, did I tell him to set the width to 700px?" lol.
Keep the width at 115px; and use margin: auto

shankar.adodis · 07-06-2011, 07:25 AM

Hello ,
I have checked your code and the form having text box and apply button has to be placed inside the div and using that div we can provide height and width and align it inside the form.

isleofman · 07-06-2011, 07:32 AM

Ha! Many thanks Sammy! I have the submit aligned center now but still below the text input.

Shankar - How do I get the correct div tag to work? I think the text input box is recalling the "steps" format.

Sammy12 · 07-06-2011, 07:51 AM

Code:

#signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;

Code:

#signin_menu {
    -moz-border-radius-top-left:5px;
    -moz-border-radius-bottom-left:5px;
    -moz-border-radius-bottom-right:5px;

Just to let you know, on your sign in form, you left out some dashes.

You probably want to set

border-radius:
-webkit-border-radius:
-moz-border-radius:

for maximum caution

Did you have another question or was that it?
Going to bed. night night.

isleofman · 07-06-2011, 08:01 AM

Thanks for your help tonight Sammy! The last question I promise is how do I get the Apply! button next to the email address input.... i.e. inline?

isleofman · 07-06-2011, 09:54 AM

Anybody got thoughts on this? How do I get this all onto one line?

abduraooft · 07-06-2011, 10:24 AM

Try

Code:

/*signup.css */
#stylized .small{
color:#666666;
/*display:block;*/
font-size:11px;
font-weight:normal;
text-align:center;
width:140px;
float: none;
    margin: auto;
    border:none;
    outline:none;
	vertical-align:middle;
}

/*style.css */
#steps BUTTON
{
	border: none;
	outline: none;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	color: #FFFFFF;
	/*display: block;*/
	cursor: pointer;
	margin: 0px 400px;
	clear: both;
	padding: 7px 10px;
	text-shadow: 0 1px 1px #777;
	font-weight: bold;
	font-family: "Century Gothic", Helvetica, sans-serif;
	font-size: 22px;
	-moz-box-shadow: 0px 0px 3px #aaa;
	-webkit-box-shadow: 0px 0px 3px #aaa;
	box-shadow: 0px 0px 3px #AAA;
	background: #4797ED;
}

#reg form button {
	float: none;
    margin: auto;
    border:none;
    outline:none;
	vertical-align:middle;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;
   /* display: block;*/
    cursor: pointer;
    clear: both;
    padding: 7px 25px;
    width: 115px;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:"Century Gothic", Helvetica, sans-serif;
    font-size:22px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background:#4797ED;
}