10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

White spacing above Amazon buy button

by cooler1
8 replies
  • WEB DESIGN
    • |
Has anyone else encountered this problem with Wordpress after adding an add-to-cart Amazon button. It has a big white space above the buy now image, which is about 40 pixels in height.

How do I remove this spacing so it's much smaller? The code used for the add-to-cart is below;


<form method="GET" action="http://www.amazon.com/gp/aws/cart/add.html"> <input type="hidden" name="AssociateTag" value="storeid-20"/> <input type="hidden" name="SubscriptionId" value="0EMJ6TWAXGX6JF1NP202"/> <input type="hidden" name="ASIN.1" value="B00003CWT6"/><br/> <input type="hidden" name="Quantity.1" value="1"/><br/> <input type="image" name="add" value="Buy from Amazon.com" border="0" alt="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif"> </form>
#amazon #button #buy #spacing #white
  • Profile picture of the author GSX
    Where are you trying to add the button? A Sidebar? In a post? Many times this can be a CSS issue within the stylesheet of the site.
    {{ DiscussionBoard.errors[7270081].message }}
    • Profile picture of the author cooler1
      Originally Posted by GSX View Post

      Where are you trying to add the button? A Sidebar? In a post? Many times this can be a CSS issue within the stylesheet of the site.
      In a post.
      Signature

      {{ DiscussionBoard.errors[7270088].message }}
  • Profile picture of the author cooler1
    If it is a CSS issue, what particular line of code should I be looking for?
    Signature

    {{ DiscussionBoard.errors[7272874].message }}
    • Profile picture of the author tryingtolearn
      Originally Posted by cooler1 View Post

      If it is a CSS issue, what particular line of code should I be looking for?
      Remove the <br /> tag from the code
      <form method="GET" action="http://www.amazon.com/gp/aws/cart/add.html"> <input type="hidden" name="AssociateTag" value="storeid-20"/> <input type="hidden" name="SubscriptionId" value="0EMJ6TWAXGX6JF1NP202"/> <input type="hidden" name="ASIN.1" value="B00003CWT6"/><br/> <input type="hidden" name="Quantity.1" value="1"/><br/> <input type="image" name="add" value="Buy from Amazon.com" border="0" alt="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif"> </form>
      {{ DiscussionBoard.errors[7274270].message }}
  • Profile picture of the author Steven Dybka
    When entering that code in the Wordpress editor I noticed that WordPress will automatically remove those <br>,but the positioning of the code is still wrong:

    Code:
    <form action="http://www.amazon.com/gp/aws/cart/add.html" method="GET"><input type="hidden" name="AssociateTag" value="storeid-20" /> <input type="hidden" name="SubscriptionId" value="0EMJ6TWAXGX6JF1NP202" /> <input type="hidden" name="ASIN.1" value="B00003CWT6" />
<input type="hidden" name="Quantity.1" value="1" />
<input type="image" name="add" value="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif" alt="Buy from Amazon.com" /></form>
    This is the way the code is positioned in the editor,you want it to display exactly like the code below:

    Code:
    <form action="http://www.amazon.com/gp/aws/cart/add.html" method="GET"><input type="hidden" name="AssociateTag" value="storeid-20" /> <input type="hidden" name="SubscriptionId" value="0EMJ6TWAXGX6JF1NP202" /> <input type="hidden" name="ASIN.1" value="B00003CWT6" /> <input type="hidden" name="Quantity.1" value="1" /> <input type="image" name="add" value="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif" alt="Buy from Amazon.com" /></form>
    those areas in red need to match up to get rid of the white spaces.


    Steve
    Signature

    {{ DiscussionBoard.errors[7274703].message }}
    • Profile picture of the author cooler1
      Originally Posted by Steven Dybka View Post

      When entering that code in the Wordpress editor I noticed that WordPress will automatically remove those <br>,but the positioning of the code is still wrong:

      Code:
      <form action="http://www.amazon.com/gp/aws/cart/add.html" method="GET"><input type="hidden" name="AssociateTag" value="storeid-20" /> <input type="hidden" name="SubscriptionId" value="0EMJ6TWAXGX6JF1NP202" /> <input type="hidden" name="ASIN.1" value="B00003CWT6" />
<input type="hidden" name="Quantity.1" value="1" />
<input type="image" name="add" value="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif" alt="Buy from Amazon.com" /></form>
      This is the way the code is positioned in the editor,you want it to display exactly like the code below:

      Code:
      <form action="http://www.amazon.com/gp/aws/cart/add.html" method="GET"><input type="hidden" name="AssociateTag" value="storeid-20" /> <input type="hidden" name="SubscriptionId" value="0EMJ6TWAXGX6JF1NP202" /> <input type="hidden" name="ASIN.1" value="B00003CWT6" /> <input type="hidden" name="Quantity.1" value="1" /> <input type="image" name="add" value="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif" alt="Buy from Amazon.com" /></form>
      those areas in red need to match up to get rid of the white spaces.


      Steve
      When you say the areas in red should match up, how do you mean? Do you mean there should be no spaces between the code in red?

      Wordpress didn't automatically remove the </br> when I entered the code.
      Signature

      {{ DiscussionBoard.errors[7274760].message }}
      • Profile picture of the author Steven Dybka
        Pasting the following code as is in your editor should work fine:

        <form action="http://www.amazon.com/gp/aws/cart/add.html" method="GET"><input type="hidden" name="AssociateTag" value="storeid-20" /> <input type="hidden" name="SubscriptionId" value="0EMJ6TWAXGX6JF1NP202" /> <input type="hidden" name="ASIN.1" value="B00003CWT6" /> <input type="hidden" name="Quantity.1" value="1" /> <input type="image" name="add" value="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif" alt="Buy from Amazon.com" /></form>


        The sections with code in red should be the way it's indicated above like this > < and not >
        < on separate lines
        I'm using the tinymce advanced plugin so that may be removing the breaks automatically for me,you can just remove them manually instead.
        edit: I just changed some settings on the tinymce plugin i use not to remove the breaks and it works more smoothly now,doesn,t interfere with the code like before,just remove the 2 <br/> from the Amazon code and it should be fine.


        Steve
        Signature

        {{ DiscussionBoard.errors[7275693].message }}
  • Profile picture of the author HostWind
    If you need to, you can implement a code in CSS on a specific object that changes its position relative of where it originally was.
    You can modify the element with this tag, in the example that you say that the white space has an extra 40 pixels above it:

    position: relative;
    top: -40px;

    I hope this helps!
    Signature
    HostWinds
    Inexpensive Web Hosting
    Unlimited Web Hosting
    {{ DiscussionBoard.errors[7275578].message }}

Trending Topics