How To Center Pro Form

[bradjbarton]

I have reduced the width of my Pro payment form to 75% and attempted to center it with this :

<link rel="stylesheet" href="../commons/style.css" type="text/css"/>
<table width="75%" align="center" cellspacing="0" cellpadding="0">
<td>
[s2Member-Pro-PayPal-Form level="1" ccaps="" desc="Bronze Plan - $9.97 USD Monthly - Automatic Recurring Monthly Charge For Ongoing Access" ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="www.sitesteering.com" ta="0" tp="0" tt="D" ra="9.97" rp="1" rt="M" rr="1" rrt="" rra="2" accept="paypal,visa,mastercard,amex,discover,maestro,solo" accept_via_paypal="paypal" coupon="" accept_coupons="0" default_country_code="US" captcha="0" /]
</td>
</tr>
<tr><td height="10px"></td></tr>
</table>

It does make the width 75%, however, it does not center the table. I have tried a number of the common HTML centering techniques, and removed the style sheet reference, but nothing I have tried centers the Pro form table after reducing the width to 75%.

Any ideas how to solve this?

[meets2]

Hello, I'm trying to do the same thing.
I've tried using the above code, but it also makes the background of the form gray.
I'd like to set the max width of forms, without changing background color.

Main reason is to make it more compact and better designed. Avoiding user to have to traverse screen from left to bottom right to click on "Submit Form".

Thank you

[Cristián Lávaque]

Have you tried margin: 0 auto;?

Could you post a link to the page with the form to take a look?

[meets2]

Can you please tell me where I should insert the margin: 0 auto; code?
I am developing locally so I don't think you can access my dev site, or can you?

[Cristián Lávaque]

No, I can't if it's in your local machine.

Well, you'd use it to style the div that contains the pro-form. http://google.com/search?q=center+div+margin+auto

[meets2]

I couldn't seem to get it to work with your code but it helped me find this

Code: Select all

<div style="margin-left; width:60%;">
            proform
</div>


I'll try to make it look better in a few days.

[bradjbarton]

The link to an example of the issue is http://www.sitesteering.com/plan-level-1/ , although I have the same issue on all the Pro payment pages.

This does not work to center it (currently in use on example page) -
<table width="75%" align="center" cellspacing="0" cellpadding="0">

This did not work -
margin: 0 auto;, although the format/syntax appears different than what is currently in use to reduce the width to 75%.

And, the example from meets2 did not change the appearance at all.

I am reasonably sure that there must be a way to do this, and that I have either not entered the correct code, or the code I entered was not the proper syntax to achieve the desired result. With the exception of adding the line to reduce the width to 75% this is standard Pro form code. Since you provide the exact method to reduce form width, if desired, it would stand to reason that you have also figured out how to re-center the form on the theme background. Can you simply tell me the exact (copy and paste) line of code I need to both reduce width to 75% and re-center the form?

[meets2]

Hello,
My example code makes the form 60% less wide.
I'm using Atahualpa free theme.
I did not want to center it, just make it smaller.

Thank you

[Cristián Lávaque]

I could center and reduce the width using styles, without a problem. Try this:

Code: Select all

<div style="width: 75%; margin: 0 auto;">
[s2Member-Pro-PayPal-Form level="1" ccaps="" desc="Bronze Plan - $9.97 USD Monthly - Automatic Recurring Monthly Charge For Ongoing Access" ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="www.sitesteering.com" ta="0" tp="0" tt="D" ra="9.97" rp="1" rt="M" rr="1" rrt="" rra="2" accept="paypal,visa,mastercard,amex,discover,maestro,solo" accept_via_paypal="paypal" coupon="" accept_coupons="0" default_country_code="US" captcha="0" /]
</div>



I hope that helps.

[bradjbarton]

That works. Now I have a cell padding issue, but I'll work on that. Thanks.

[Cristián Lávaque]

Cool.

[bradjbarton]

OK on the <div style="width: 75%; margin: 0 auto;"> for centering, but I cannot resolve the cell padding issue.

Please check the bottom border of the white background area at http://www.sitesteering.com/plan-level-1/. Click on one of the cards to expand the page and you will see that the issue follows the page, regardless of length.

And then check http://www.sitesteering.com/plan-level-2/ for comparison.

The only change is the addition of the <div style="width: 75%; margin: 0 auto;">. My old table references have been removed from both pages, but the table references did not alter this bottom cell border anyway.

Any ideas on this?

[Raam Dev]

Those two links redirect to http://www.sitesteering.com/sms-text-vo ... g-options/ (which appears to be your s2Member Member Options page).

[bradjbarton]

No, they are PayPal Pro payment pages, but one of the programmers apparently mis-understood the page level restrictions and changed them to the membership levels today. Sigh. Please recheck it.

[Raam Dev]

This page: http://www.sitesteering.com/plan-level-1/ still redirects to the Membership Options page.

[bradjbarton]

Sigh. Try it again.

[Raam Dev]

Comparing the HTML for the two pages, you can see where the problem is.

Here's the working page:

Code: Select all

<div id="wrapper">
   <style>
   <div id="launchheader">
   <div id="launchheaderbottom"></div>
   <div id="launchbk">
   <div id="launchfooter"></div>
</div>


Notice how the launchfooter DIV is located inside the wrapper DIV? That's where it should be. (The launchfooter DIV is what creates the bottom of your white frame.)

Now look at the broken page:

Code: Select all

<div id="wrapper">
   <style>
   <div id="launchheader">
   <div id="launchheaderbottom"></div>
   <div id="launchbk">
      <div id="launchvideocontainer" style="width:; height:;">
      <div id="launchinnermain">
      <div id="launchfooter"></div>
   </div>
   <div id="wrapper"> </div>
   <div id="footer">
   <div style="text-align: center;">
</div>

Notice where launchfooter is now? It's inside the launchbk DIV. That's not where it's supposed to be.

I'm not sure how your templates are set up or if you're doing anything else on these pages in terms of creating the HTML, but something is screwing up the DIVs. If you create all the launch DIVs inside the WordPress page editor, then you're missing a closing </div> somehwere and that's screwing things up.

[bradjbarton]

Hey Raam - perfect. Thanks for your follow through and understanding of the issue. The solution was simple after you pointed out my error.

Could you do me a favor and check out another issue that I am trying to resolve here:

viewtopic.php?f=4&t=16210&p=59782#p59782

Post = Member Level Re-direct & Link Visibility