Remove border and centre Paypal button

  • Resolved wallacemarino

    (@wallacemarino)


    12 years, 3 months ago

    Hi guys.

    I’m having trouble getting rid of the grey border that my theme is adding around my custom paypal button image. I know this problem has been asked about both here and on other forums all of which suggest adding various different lines of code to the themes’ custom CSS panel. I have tried every different variation I can find and none of them seem to work in my case. I’m no CSS expert so I was wondering if you guys could help me out.

    The button can be found here: https://www.stateofmindrugby.com/cmspages/contact/tshirts/

    The button code is as follows:

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="QU99P4XYG2RE8" />&nbsp;
<table>
<tbody>
<tr>
<td style="text-align: center;"><input name="on0" type="hidden" value="Sizes - What's Yours?" />Sizes - What's Yours?</td>
</tr>
<tr>
<td style="text-align: center;"><select name="os0"> <option value="Small">Small </option> <option value="Medium">Medium </option> <option value="Large">Large </option> <option value="X-Large">X-Large </option> <option value="XX-Large">XX-Large </option> </select></td>
</tr>
</tbody>
</table>
<input alt="PayPal — The safer, easier way to pay online." name="submit" src="https://www.stateofmindrugby.com/cmspages/wp-content/uploads/2012/10/Buy-Tshirt1.png" type="image" /> <img src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" border="-10" alt="" width="1" height="1" />&nbsp;

</form>

    Whilst I’m bugging you I’m also having trouble getting the button image to centre. When I first set the button up I managed to get it to centre by adding align=”middle” to the code for the image, but I’ve since changed the button and that no longer seems to work. Any suggestions?

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter wallacemarino

    (@wallacemarino)

    Ok so I resolved the issue with the border. All the CSS code examples I had seen on other forums dealt with the border settings, however in the case of my theme it was the padding that was causing the issue so adding this to the custom css fixed it:

    form input {padding:0px;}

    I am still struggling to get the button image to centre though, can you guys help me with that?

    Cheers

    Thread Starter wallacemarino

    (@wallacemarino)

    RESOLVED

    Sorted the centering issue by surrounding the image code a div tag with an align command: 

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="QU99P4XYG2RE8" />&nbsp;
<table>
<tbody>
<tr>
<td style="text-align: center;"><input name="on0" type="hidden" value="Sizes - What's Yours?" />Sizes - What's Yours?</td>
</tr>
<tr>
<td style="text-align: center;"><select name="os0"> <option value="Small">Small </option> <option value="Medium">Medium </option> <option value="Large">Large </option> <option value="X-Large">X-Large </option> <option value="XX-Large">XX-Large </option> </select></td>
</tr>
</tbody>
</table>
<div align='center'>
<input alt="PayPal — The safer, easier way to pay online." name="submit" src="https://www.stateofmindrugby.com/cmspages/wp-content/uploads/2012/10/Buy-Tshirt1.png" type="image" /> <img src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" border="-10" alt="" width="1" height="1" align="center" />&nbsp;
</div>
</form>

    do you mean the size button? It’s centered in Firefox. Make sure to clear any caches.

    But also be aware that “align: center;” is deprecated code — so not advisable to use it.

    Thread Starter wallacemarino

    (@wallacemarino)

    In that case what would be the correct code?

    and no I was referring to the “buy it now” t-shirt image, I’ve never had any problem getting the size list to centre.

    Thanks

    For text, it’s “text-align: center;` For elements, it’s generally done using “auto” on the side margins — but the element must be block element and less than the width of the containing element for that to work.

    So in the case of your t-shirt image, you would need to add an id or class to the div containing the image:

    <div id="shirt">

    and then use that in the CSS:

    #shirt {
    margin: 0 auto;
    width: 240px;
}

    The width would need to be set to approx the width of the image

    Thread Starter wallacemarino

    (@wallacemarino)

    Thanks I’ll give that a go.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Remove border and centre Paypal button’ is closed to new replies.