Link to home
Start Free TrialLog in
Avatar of epichero22
epichero22Flag for United States of America

asked on

Images not displaying properly in Wordpress

Take a look:

http://www.redalertconsulting.com/store/

You'll notice how the PayPal buttons have a lot of spacing between the titles (ie, "Gold Membership").  Anyway to fix that?  I would prefer the buttons be directly underneath their respectful titles, centered, and not as much spacing.

Thanks :)
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Check this out:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.redalertconsulting.com%2Fstore%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

When the markup is not compliant, it's almost impossible to get the browser output to be useful and consistent.  If you can get the markup right so that it passes validation, we can revisit this question from a position of advantage.
Avatar of epichero22

ASKER

I know that this theme is screwed up, but is there a way to work around this?  I'm just looking for some simple touch-ups.
ASKER CERTIFIED SOLUTION
Avatar of OmniUnlimited
OmniUnlimited
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Experts, thanks for the feedback, and here's where I was able to get.  I changed the page's URL to this site, please look here:

http://www.redalertconsulting.com/options-and-programs-test-page/

Omni:
I tried what you said and it didn't change it.  Please see the code below if that helps.

Julian:
There are no <br/> elements in my code (see below).
I added the following at the top of the page and the buttons appear to have been centered, which is a good thing.
I added the margin-bottom property and set it to 0, yet it only moved the buttons slightly higher.


<style>
  form {
  text-align: center;
}
</style>

<p style="text-align: center;"><span style="text-decoration: underline; font-size: x-large;"><strong>Option 1: Recurring Retainer</strong></span></p>
<p style="text-align: center;"><span style="font-size: large;">A monthly billing plan. Unused hours are rolled over to the next month and are available as long as the subscription is active.
</span></p>
<p style="text-align: left;"><span style="text-decoration: underline; font-size: medium;">Benefits:</span>
<span style="font-size: medium;"> Stays within your budget.</span>
<span style="font-size: medium;"> Always have a technician available when needed.</span>
<span style="font-size: medium;"> No more worry about "surprise" invoices or charges.</span>
<span style="font-size: medium;"> Allows better, more accurate planning towards both your short and long-term IT business needs and goals.</span>
<span style="font-size: medium;"> More involvement in your business processes through added services such as employee training and attendance to your business meetings.</span></p>

<p style="text-align: center; margin-bottom: 0"><span style="font-size: medium;">Gold Membership - 8 Hours @ $81.00 Per Hour:</span><input type="hidden" name="hosted_button_id" value="VL89HCWFFW8SN" /></p>

<form target = "Paypal" form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="VL89HCWFFW8SN" />
<input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" /></form>

<p style="text-align: center;"><span style="font-size: medium;">Standard Membership - 4 Hours @ $90.00 Per Hour:</span></p>

<form target = "Paypal" form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="ZP65QUFR8MEMJ" />
<input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" /></form>
<p style="text-align: center;"><span style="text-decoration: underline; font-size: x-large;"><strong>Option 2: Prepaid Hourly</strong></span></p>
<p style="text-align: center;"><span style="font-size: large;">For businesses that would like service without any commitment.  Hours are dispensed as you need them, and can be used any time.</span></p>
<p style="text-align: center;"><span style="font-size: medium;">2 Hours @ $150.00 / Hour (No Savings):</span></p>

<form target = "Paypal" form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="UNP5BSALBX3AA" />
<input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" /></form>
<p style="text-align: center;"><span style="font-size: medium;">4 Hours @ $112.50 / Hour (Savings of 25%):<input type="hidden" name="hosted_button_id" value="FSARW79QEELEE" /></span></p>

<form target = "Paypal" form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="FSARW79QEELEE" />
<input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" /></form>
<p style="text-align: center;"><span style="font-size: medium;">8 Hours @ $105.00 / Hour (Savings of 30%):</span></p>

<form target = "Paypal" form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="SRRGQSKPC9FKC" />
<input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" /></form>
<p style="text-align: center;"><span style="font-size: medium;">16 Hours @ $97.50 / Hour (Save 35%):</span></p>

<form target = "Paypal" form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="T9QRSRH7G6HD6" />
<input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" /></form>
<p style="text-align: center;"><strong><span style="text-decoration: underline;"><span style="font-size: x-large;">Option 3: Flate-Rate Quote</span></span>
</strong></p>
<p style="text-align: center;">For businesses who are on tighter budgets, we can quote a flat-rate and draw up a scope for almost any project.  Please use the contact us page by clicking <a href="http://www.redalertconsulting.com/contact-us/">here</a> and feel free to either send us a written request or call us and we'll discuss getting your project up and running.</p>

Open in new window

Upon inspecting the code that is on your test page, the <br />' s are still there.  If you are telling me you removed them, then this indicates to me that the code editor is inserting them into your HTML.

You may need to refer to the manual on your code editor, or try using a text editor like notepad to edit the file then FTP it up to your site.
... the <br />' s are still there.
This sort of thing is a common symptom of testing the wrong script.  Changes are made to a script, it's saved (but in the wrong directory), and when the test is run, a different copy of the script gets executed.  Poof, the changes disappeared for "no reason."  

Add a signal string to the data, perhaps an HTML comment.  Look at the before and after "view source" to verify that your tests are what you expect.
Also, if you are using WordPress' HTML editor (which I strongly suspect is the case), you should know that it will automatically insert <p> and <br /> tags into your HTML.

You can stop this behaviour by adding the following code to your functions.php file in your theme directory:

<?php remove_filter( 'the_content', 'wpautop' ); ?>

Open in new window

Um yes there are <br>'s in your script.

Here is the ACTUAL code that is on the page you gave us a link to
<form method="post" action="https://www.paypal.com/cgi-bin/webscr" form="" target="Paypal"><input type="hidden" value="_s-xclick" name="cmd"><br>
<input type="hidden" value="VL89HCWFFW8SN" name="hosted_button_id"><br>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!"><br>
<img width="1" height="1" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" alt=""></form>

Open in new window

After making the changes I suggested in my previous post using Firebug the problem does resolve.
Did you update your css file with the text-align: center for the form? Doesn't seem to be updated on the link you gave.
Hi Experts, sorry for the delay, but I was hit with work...give me a little bit of time and I'll continue with this shortly.
OK, thanks for letting us know.
You're welcome.