Misaligned Submit Button

[asloaney]

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!!

[jscheuer1]

No. No one ever gets a question answered here. :p

As to your actual question, do you want them centered or to the right, or on the same line, or some combination, or something else?

Also - CSS cannot tell anything to be part of a paragraph. A paragraph lasts until a </p> tag or an opening tag for a block level element, whichever comes first. In this case the paragraph ends here:


. . . oncus facilisis.</p>

But if you remove the </p> tag, it would still effectively end there, more precisely here (div is a block level element):


. . . oncus facilisis.<br><br>
<div id="reg">

Things are also complicated because the initial positions vary by browser. In IE, Opera and Chrome the two are both centered beneath the text with a line break between them. In Firefox there's still the line break and the input is centered but the button below it is off to the right a bit. This appears to be because, of the mentioned browsers Firefox is alone in respecting this selector (at least in certain ways) for the input:


#reg form input:not([type=radio])

and this one (also at least in certain ways) for the button:


#steps BUTTON

Browsers also vary in the amount of vertical space between the two. But the breakdown is more varied than with the positioning. The fact that they are not on the same line appears to be because of these styles in the style.css file:


#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;
}

and (in the same file):


#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;
}

To get them on the same line, remove the two display: block; entries and set the 400px value to auto - Not all of these changes are required in all browsers to achieve the result of having them be on one line. However, they are in order to get all of the listed browsers to comply.

But you might be after something else. In which case, just what exactly do you want?

[Beverleyh]

To answer your first question; Yes, questions get answered here - many, many infact.

There are a few reasons why people may not get their questions answered;

1 - They do not clearly explain their problem, or their goal, or provide links and screen caps to illustrate.
2 - They come on the forum demanding help, or with an attitude of entitlement, forgetting that the people they're asking for help from are unpaid volunteers who are just browsing the forum too, offering help where they can.
3 - They expect others to do the work for them without willingness to put in much effort themselves.
4 - They use undescriptive thread titles or general "Need Help" type of titles.

There will be other reasons why people dont get answers but I think these are the main ones.

On the flipside, if a person tries to pass on a little help to others rather than adopt a 'take it and run' mentality once they have the answers they need, they'll probably find that others are more willing to help them the next time they need assistance. Its Karma right? Give aswell as take and the world (and DD forums) will be a nicer place.

Now, back to your problems -

I'm assuming that when you say that you want the submit button to align with the input field, you mean that you want the button to sit alongside it, rather than underneath?

If that's the case, your css issues lie here:
#steps BUTTON { DISPLAY: block; MARGIN: 0px 400px; }
and here:
#reg FORM BUTTON { DISPLAY: block; }

Switch both to DISPLAY: inline-block and reduce the 400px margin. At the moment youre applying the 400px margin to the left and right of the button which is pushing it away from the input field, beyond the width of its boundary div, and dropping onto the line below. You might want to use something like MARGIN: 0 400px 0 0 instead.

[Beverleyh]

Morning John - I obviously type way slower than you :)