HTML table and PayPal button not displaying properly

• HollyW00d

  said

  Hello,

  I am trying to update our pricing page with a paypal button however the drop down is appearing on the left hand side of the button. It is supposed to appear up above the button. Here is the code:

  <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="xx">
  <table>
  <tr><td><input type="hidden" name="on0" value="Select an Address">Select an Address</td></tr><tr><td><select name="os0">
    <option value="New York, NY">New York, NY </option>
    <option value="San Diego, CA">San Diego, CA </option>
    <option value="Tallahassee, FL">Tallahassee, FL </option>
    <option value="Dallas, TX">Dallas, TX </option>
    <option value="Las Vegas, NV">Las Vegas, NV </option>
    <option value="Portland, OR">Portland, OR </option>
  </select> </td></tr>
  </table>
  <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribe_SM.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>
  

  Please note that I took out the value code but it doesn’t effect how the button will appear. I have tried everything that I know of. Even when posting in a blank page the button appears distorted. Here is the link to the test page: http://travelingmailbox.com/test-page

  If anyone has any suggestions please let me know!

• jerryminer

  said

  I am a total newbie, but I ran this in Dreamweaver and looked at it in Safari and it outputs with the Subscribe button below the drop down selection box.
  What would happen if you simply added another row and put the button code in as td?

• HollyW00d

  said

  What do you mean? The Subscribe button is supposed to be below the dropdown but when i put it in a blank page in wordpress on the mingle theme … the dropdown shows up to the left.

• HollyW00d

  said

  I also wanted to point out that in the Visual section of the edit page the button appears to display correctly. But when you publish and view the page, it is not.

• jeffw

  said

  Hi, HollyW00d.

  If you are using HTML in your content then you must use the Text editor, not the Visual editor because the Visual editor will almost always mess with your HTML and ruin it. Use the Text editor and stick to the Text editor when your content uses HTML and/or shortcodes. Do not even click the Visual tab because even doing this will most likely result in WordPress rewriting your code and ruining it.

  Change your <table> tag to the following and you should be hunky dory:

  <table style="float:none">

• HollyW00d

  said

  Thanks jeffw … That worked! You are always spot on with the support!

• HollyW00d

  said

  Hey one last thing jeffw …

  I am inserting this code on the new pricing page inside of tabs and the pricing table so the formatting still appears broken.

  Here is the page: http://travelingmailbox.com/new-pricing ‎

  Any suggestions on how to fix it there?

• jeffw

  said

  You have chosen to float the table to the right therefore the button will be on the left. You’ll need to style the table and the PayPal button appropriately to position them the way you want them. Perhaps the easiest thing to do will be to take jerryminer’s suggestion and put the PayPal button in the table in its own row.

• HollyW00d

  said

  Refresh your page please. I changed it back to float none and the dropdown is over to the left of the button again.

• jeffw

  said

  As I said, you’ll need to style the table and the PayPal button appropriately to position them the way you want them. Perhaps the easiest thing to do will be to take jerryminer’s suggestion and put the PayPal button in the table in its own row. (clue: The PayPal button is being centred in its container while the table above it is flush left.)

• HollyW00d

  said

  hmm … Im not sure how to do that. Any help? I don’t know html at all really.

• jeffw

  said

  A row in a table looks like this:

  <tr>
    <td>
      ... cell content ...
    </td>
  </tr>

  You’ll need to figure out the rest for yourself because unfortunately the support team is not able to tutor any customer in the use of HTML and CSS, nor can we provide custom code for every customer’s specific needs.

  References:
  http://www.w3schools.com/html/html_tables.asp

• HollyW00d

  said

  Alright thanks!