Form Button Question

[Todd_Temple]

I have this site here (http://thisiswhereiplay.com/) that I am trying to style the “Go” button for the Newsletter form located in the very bottom right corner of the footer.

The top portion (red Go button) is how I would like for the button to appear. It is inline and appears connected to the input field.

The bottom portion (blue Go button) is the form that is working properly (as far as the backend).

Can someone help me figure this one out? Thanks in advance!

[ralphm]

It’s not really clear what you are asking, but presumably you want the blue button to be placed like the red button is?

Why not use the same structure and CSS as used for the red button? You have the answer in front of you.

[PaulOB]

You could try something like this:

#mc_embed_signup_scroll {
    display:table;
    width:100%;
    margin:10px 0
}
.mc-field-group, #mce-responses {
    display:table-cell;
    vertical-align:top;
}
.mc-field-group label {
    display:table-cell
}
#mc_embed_signup_scroll .form-control {
    width:100%;
    border-radius:4px 0 0 4px
}
#mc_embed_signup_scroll .clear .btn {
    border-radius:0 4px 4px 0
}

As Ralph mentioned it would be easier of you copied the structure of the element above.

[Todd_Temple]

The reason I did not use the structure and CSS used for the red button is because I did not create it and ultimately was having a hard time understanding how it was positioning the red button directly beside the form field. I appreciate your response and I will try to decipher what rules and properties are being used to create the effect I was going for. Thanks ralphm!

[Todd_Temple]

Thank you too PaulOB. I had copied the code for the signup form with the blue button and I was uncertain how difficult it would be to alter the structure of that code and still allow it to function properly. Obviously I have a lot to learn. I really do appreciate your insight and your code displayed here was able to solve the problem I was having. Thank you very much!