WordPress.org

Ready to get started?Download WordPress

Forums

How to override Paypal button vertical alignment? (3 posts)

  1. david.danaan
    Member
    Posted 8 months ago #

    I have multiple Paypal buttons on my site that were aligned to the right of their descriptive paragraphs by styling the form tag. With the new version of either WP or PHP, they now seem to be aligned in an invisible table that doesn't correspond to the text. Nothing I do with css vertical alignment has any effect.

    I believe this is due to a default Paypal table created when generating the buttons. Is there a way of overriding the unwanted alignment?

    http://www.loudoungiftsforgood.org/2013/10/10/all-ages-read-together/

    Using Shell-Lite Child theme.

    css:

    form {
        float:right;
        clear:right;
        margin-left:2.4em;
        vertical-align:bottom !important; //* this line was added with no effect */
    }

    html:

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post"
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="N4BKXYGRNA4KQ">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>
    Any Amount - All agencies have overhead costs including rent, utilities, audit expenses and fundraising costs, etc. Your gift in any amount for general operating support will help keep this organization strong and allow us to serve even more Loudoun County residents.
  2. Colin Young
    Member
    Posted 8 months ago #

    Hi David

    That's a tough one but I would either build a table round the options with the description and appropriate paypal button in the same row

    or

    create a list with description followed by paypal button then use css to align them

  3. david.danaan
    Member
    Posted 8 months ago #

    I still don't know what caused the alignment to change in the first place when it worked before, but adding the line

    margin-top:-50px;

    to the <form> fixed the problem.

Reply

You must log in to post.

About this Topic