centering a paypal button[solved]

[MikeD]

Yes, I know how this sounds, but damn..I've spent an hour or two on this, and I just can't get it to freaking align in the middle, vertical or horizontal!

Ok this is where the table is.

Code: Select all

function credits()
  {
    ?>
    <table id="creditpacks">
    <tr>
    <th>Package ID</th>
    <th>Cost</th>
    <th>Bonus</th>
    <th>Credits</th>
    <th>Purchase</th>
    </tr>
    
    <tr>
    <td>1</td>
    <td>$2.50</td>
    <td>0%</td>
    <td>2500</td>
    <td>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="POST">
      <input type="hidden" name="cmd" value="_xclick">
      <input type="hidden" name="business" value="admin@warriorsrealm.net">
      <input type="hidden" name="item_name" value="2500 Credits">
      <input type="hidden" name="item_number" value="1">
      <input type="hidden" name="amount" value="2.50">
      <input type="hidden" name="no_shipping" value="1">
      <input type="hidden" name="no_note" value="1">
      <input type="hidden" name="currency_code" value="USD">
      <input type="hidden" name="lc" value="US">
      <input type="hidden" name="return" value="">
      <input type="hidden" name="cancel_return" value="">
      <input type="hidden" name="rm" value="2">
      <input type="hidden" name="notify_url" value="" />
      <input type="hidden" name="custom" value="">
      <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_SM.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
    </form>
    </td>
    </tr>
</table>
<?php
}

This is where it's called

Code: Select all

<div id="warriors">
      <?php
      if (isset($_GET['type']))
        {
          $type=mysqli_real_escape_string($db,$_GET['type']);
        }
      else
        {
          $type='credits';
        }
        
        $type();
      ?>
    </div>

Here's the relevent CSS code.

Code: Select all

#warriors
{
float:left;
padding-left:20px;
padding-top:20px;
height:350px;
width:960px;
overflow-x:hidden;
overflow-y:auto;
color:#FFFFFF;
}

#creditpacks
{
width:500px;
text-align:center;
color:#FFFFFF;
border: 1px solid #6c6c6c;
border-collapse:collapse;
}

#creditpacks th,td
{
border: 1px solid #6c6c6c;
border-collapse:collapse;
}

#creditpacks tr.alt
{
background-color:#1d1d1d;
vertical-align:middle;
height:30px;
}

#creditpacks tr
{
background-color:#313131;
vertical-align:middle;
height:30px;
}

#creditpacks th
{
background-color:#000000;
}

form
{
height:0px;
width:0px;
align:center;
}

I've tried valign, vertical-align, making it a div...Just isn't working right.

Here's what it looks like.

http://gyazo.com/b4509426c083befc0fd9fe1b8eb01fbc

[fang]

remove this part from form css:

Code: Select all

    height: 0;
    width: 0;

This is pretty common; <form> by default is a block element (by default will expand to it's container unless you specify a width) with overflow set to visible(anything inside it that doesn't fit just bleeds out of it's boundaries); what happened is that you're setting it's dimensions to 0x0, and the element inside of it pops out and bleeds over everything; can cause some unpredictable behavior.

Without these two rules, the form element will expand to the full width of the cell. It inherits text-align: center; from a higher-up element, causing the inline input to center.

[MikeD]

Without the form settings, it creates a big ugly space on the bottom of the button, which I can't get it vertically aligned into the middle

http://gyazo.com/85c7d1413957aa56487463ff2f690e55

[fang]

What browser are you using?

What seems to be happening is a padding/margin issue. Try this:

Code: Select all

form, input {
    padding: 0;
    margin: 0;
}

Go more specific with the selector if it conflicts with other things.

========================================================================

If you're using safari/chrome, they have the 'chrome developer tools' built in.

IE 8+ has 'developer tools'.

For firefox, get firebug.

All of these will allow you to interactively inspect and modify elements, and have an area that will show you the box models with padding/margin.

[MikeD]

What browser are you using?

What seems to be happening is a padding/margin issue. Try this:

Code: Select all

form, input {
    padding: 0;
    margin: 0;
}

Go more specific with the selector if it conflicts with other things.

========================================================================

If you're using safari/chrome, they have the 'chrome developer tools' built in.

IE 8+ has 'developer tools'.

For firefox, get firebug.

All of these will allow you to interactively inspect and modify elements, and have an area that will show you the box models with padding/margin.

Using Chrome, and that worked, thanks a ton!