Custom button image won't align with text field but using one of jotform's buttons will

  • Profile Image
    murcjot
    Asked on August 30, 2012 at 03:02 PM

    I am adding a newsletter sign up button to the header of the page and I want it all on one line.

    I looked up how to do so and everything worked perfectly since I was able to use the Inject Custom CSS to set margins and get it to line up perfectly after using your shrink and move up method.

    The issue I'm having is that when I use a custom image for a button, the button won't change positions regardless of how much I change the margins. Why is this?

     

    Also, if I were to use one of your buttons, is there a way to align the text for that button so its centered? If I change the word submit to subscribe or need a different size button, the wording is off center both vertically and horizontally. 

     

    Thanks in advance

  • Profile Image
    pinoytech
    Answered on August 30, 2012 at 03:38 PM

    Hi murcjot,

    Sorry for any inconvenience that may have caused. Regarding on this issue, would you mind if we ask your Form URL to investigate the said issue?

    Thank you!

  • Profile Image
    murcjot
    Answered on August 31, 2012 at 12:10 AM

    I haven't uploaded it to a server yet. It is not required to to test it on a browser and you can even see it on the preview of the form through jotform as well.

    If someone would take a look at my 'HTR Email List Button', it is currently using one of your buttons and aligned properly.

    I will duplicate the button tomorrow, only this time I will use the custom button image and get back to u on this thread. If you'd like to try your own custom button image and see if aligning works, maybe that would work as well.

    *note that I was using a smaller button, which I sized accordingly, when I ran into this issue. No matter how I changed the margin, it wouldn't move from the location it started at, which was nowhere near my text field

  • Profile Image
    idarktech
    Answered on August 31, 2012 at 02:22 AM

    @murcjot

    Try adding !important on your css codes, that might help. Example:

    .form-submit-button {

    height: 29px;

    margin-left: -145px !important;

    margin-top: 26px !important;

    }

    Check my example here using button image: http://form.jotform.me/form/22430870298456?

    Hope this helps. Thank you!