12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Why will my table not look right, and PayPal button?

by timpears
10 replies
I have a table in my WP page with a PayPal button below. i have two book covers, and in the last cell I have a description of sorts. The first cell the cover is down low, the second cell the cover is up high, and the last cell the wording is down low again. And my PayPal button does not show up right. I copied the code from PayPal and pasted it in the text tab of my blog page. See graphic below for example of what the page displays.


See the red circles, why is that happening? I have tried everything I can to make this look right. i don't understand why the cells alternate between high and low. I just uploaded the graphic as usual in a blog.

I need some help.:confused::confused::confused:

I am going to bed shortly, so if you need any more information, I will be back in about eleven to twelve hours, depending on how long it takes me to get my morning stuff done.
#button #paypal #table
  • Profile picture of the author viescripts
    my chrome browser for example doesn't load images from https connection until I approve them in another window.

    e.g. right click on paypal button image, open it in another window, reload and click on yes to question about your trust to ssl service.
    After image is loaded, reload your original page
    This all will work until you close/open your browser window once again.


    In fact, I usually download paypal image to a local folder and link it directly - makes less problems.
    {{ DiscussionBoard.errors[7953301].message }}
    • Profile picture of the author Brandon Tanner
      Tables were never meant to be used for layout purposes - you should use div's and CSS for that instead.

      Web Page Layouts Shouldn't Use Tables - Avoid Tables for Web Page Layout

      Regarding why your Paypal button isn't displaying correctly... likely either the wrong path to the button's image, or a syntax error. No way to know for sure though without seeing the code. What's the URL?
      Signature

      {{ DiscussionBoard.errors[7953732].message }}
      • Profile picture of the author Steve Wells
        Originally Posted by Brandon Tanner View Post

        Tables were never meant to be used for layout purposes - you should use div's and CSS for that instead.

        Web Page Layouts Shouldn't Use Tables - Avoid Tables for Web Page Layout

        Regarding why your Paypal button isn't displaying correctly... likely either the wrong path to the button's image, or a syntax error. No way to know for sure though without seeing the code. What's the URL?
        Your correct Brandon, but they work fine if you do not know css.

        Not to long ago, all websites were formatted with tables only.

        So, in this persons case, they only know about tables, and it's kinda crazy to assume they are going to learn about css, and apply it, when they cannot get tables down.

        My suggestion, use a table generator, it will make the tables for you, and just pop in your content.

        Use 1 px borders until you have everything formatted, it helps to see what your doing, then just change the border to 0px.

        HTML Table Generator

        Yes all browsers handle tables differently but not too drastically. If he just keeps it simple it will be fine. I am sure there is something probably messed up in the code OR WordPress is probably trying to make changes to the html on it's own, which can be a pain.

        Try this.... but make sure to keep a backup of your other tables just in case... you'll have to add your image urls to this, but it should work in theory.

        FIXED WIDTH of 960px
        HTML Code:
        <table width="960px" border="1" align="center" cellpadding="5" cellspacing="0" bordercolor="#f5f5f5" style="background-color:#FFFFFF">
  <tr>
	<td width="33%"><div align="center">Image 1</div></td>
	<td><div align="center">Image 2</div></td>
	<td width="33%"><div align="center">Image 3</div></td>
  </tr>
  <tr>
	<td width="33%"><div align="center">Image 4</div></td>
	<td><div align="center">Image 5</div></td>
	<td width="33%"><div align="center">Image 6</div></td>
  </tr>
  <tr>
	 <td width="33%">&nbsp;</td>
	 <td><div align="center">Add Paypal Button</div></td>
	 <td width="33%">&nbsp;</td>
  </tr>
</table>
        FLUID WIDTH of 100%
        HTML Code:
        <table border="1" bordercolor="#f5f5f5" style="background-color:#FFFFFF" width="100%" cellpadding="5" cellspacing="0">
  <tr>
	<td width="33%"><div align="center">Image 1</div></td>
	<td><div align="center">Image 2</div></td>
	<td width="33%"><div align="center">Image 3</div></td>
  </tr>
  <tr>
	<td width="33%"><div align="center">Image 4</div></td>
	<td><div align="center">Image 5</div></td>
	<td width="33%"><div align="center">Image 6</div></td>
  </tr>
  <tr>
	 <td width="33%">&nbsp;</td>
	 <td><div align="center">Add Paypal Button</div></td>
	 <td width="33%">&nbsp;</td>
  </tr>
</table>
        The code above should layout like this........
        Signature
        Need Custom Graphics Work? - Message Me For A Design Quote!
        {{ DiscussionBoard.errors[7956746].message }}
        • Profile picture of the author Brandon Tanner
          IMO it would be a lot better to do something like this. Much cleaner code, and far more standards-compliant.

          CSS
          HTML Code:
          .column {float: left; width: 33%; margin-bottom: 20px; text-align: center;}
          HTML
          HTML Code:
          <div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column" style="width: 100%;">Paypal Button</div>
          Signature

          {{ DiscussionBoard.errors[7958384].message }}
          • Profile picture of the author Steve Wells
            Originally Posted by Brandon Tanner View Post

            IMO it would be a lot better to do something like this. Much cleaner code, and far more standards-compliant.

            CSS
            HTML Code:
            .column {float: left; width: 33%; margin-bottom: 20px; text-align: center;}
            HTML
            HTML Code:
            <div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column"><img src="#"></div>
<div class="column" style="width: 100%;">Paypal Button</div>
            That may work also, if he knows how to edit the css style sheet?

            I think both options work for this scenario. There are soo many websites that are not standards compliant, since the standards change weekly almost. It's kinda hard to go wrong with tables, that expand and contract as long as the tables do not go smaller than the images. Which I doubt would happen viewing even on an ipad. But for mobile, he will have problems for sure, although I do not think he is concerned about that...?

            Either way, he has two options now..... one of them should work I would think....
            Signature
            Need Custom Graphics Work? - Message Me For A Design Quote!
            {{ DiscussionBoard.errors[7959840].message }}
            • Profile picture of the author Brandon Tanner
              Originally Posted by Steve Wells View Post

              But for mobile, he will have problems for sure, although I do not think he is concerned about that...?
              If he's not "concerned" about mobile, then he's ignoring a significant percentage of his website visitors, and that percentage is only going to increase. Which of course means a lower conversion rate overall, because tables (used for layout purposes) are an absolute train wreck in many (if not most) mobile browsers. So if he doesn't want to maximize his conversion rate, then by all means, he should keep using tables. :p
              Signature

              {{ DiscussionBoard.errors[7961772].message }}
        • Profile picture of the author timpears
          Originally Posted by Steve Wells View Post

          My suggestion, use a table generator, it will make the tables for you, and just pop in your content.

          Use 1 px borders until you have everything formatted, it helps to see what your doing, then just change the border to 0px.

          HTML Table Generator

          Yes all browsers handle tables differently but not too drastically. If he just keeps it simple it will be fine. I am sure there is something probably messed up in the code OR WordPress is probably trying to make changes to the html on it's own, which can be a pain.

          Try this.... but make sure to keep a backup of your other tables just in case... you'll have to add your image urls to this, but it should work in theory.
          Well i tried this, and it almost worked. Now the book covers are lining up, but the words ard way down for some reason. Damn tables anyway. I got someone who is supposed to get together with me tomorrow and get this fixed.

          OTO | I Am Going To Hawaii is what I have so far.

          I wished I had kept up with my web design studies, but life got in the way. Oh well.
          Signature

          Tim Pears

          {{ DiscussionBoard.errors[7967291].message }}
          • Profile picture of the author Steve Wells
            Originally Posted by timpears View Post

            Well i tried this, and it almost worked. Now the book covers are lining up, but the words ard way down for some reason. Damn tables anyway. I got someone who is supposed to get together with me tomorrow and get this fixed.

            OTO | I Am Going To Hawaii is what I have so far.

            I wished I had kept up with my web design studies, but life got in the way. Oh well.
            Looks good now...
            Signature
            Need Custom Graphics Work? - Message Me For A Design Quote!
            {{ DiscussionBoard.errors[7998856].message }}
  • Profile picture of the author timpears
    The page looks total crap. And I am at my wits end on fixing it. Divs and CSS are over my head when it comes to programming. If you want to look at it Branden, I am happy to give you access to dashboard. If you have the time as you are probably busy and have work of your own to do.

    I figured I could just set up a table in Dreamweaver, and past it in the text tab. That is what I get for doing my own thinking though. Oh well.
    Signature

    Tim Pears

    {{ DiscussionBoard.errors[7954293].message }}
    • Profile picture of the author Brandon Tanner
      I took a quick look at the page and the Paypal buy button shows up fine for me (in both FF and IE).

      Regarding everything else... if you use tables for design / layout, then expect to run into a lot of problems, because every browser renders content inside tables differently. If you want to do it right, you're gonna have to bite the bullet and learn proper web design (or pay someone to do it for you).
      Signature

      {{ DiscussionBoard.errors[7954449].message }}

Trending Topics