Paypal button NOT ALIGNED vertically

May 31, 2009 at 01:01:08
Specs: WIn XP SP2, 2 Go
This has made me crazy for days.

I put some paypal (BUY) buttons in a table to make sure they are perfectly aligned, but they are not. I use the align="middle" attribute but it's only slightly working in firefox and certainly not in IE.

I tried the paypal "add to cart" buttons as well and they were more align than their buy buttons. Somehow, they are putting some hidden codes that made the positionning almost impossible.

Can anyone solve this ?

Here is a temporary page:

( click on the yellow ACHAT EN LIGNE to see the frame with the paypal "acheter" (buy)buttons )

Thank you very much.

See More: Paypal button NOT ALIGNED vertically

Report •

June 1, 2009 at 06:19:11
Anyone ? Please !!!

Report •

June 1, 2009 at 06:35:48
I took a quick check at the source, so this may be way off, but I noticed you've got a form inside of the td. Have you set the margin/padding of the forms to 0px?

Also, you might try <td background="../trame-brun-2.gif" align="center" valign="center">...</td> to see if that will help align the buttons.

Good luck.

Report •

June 1, 2009 at 19:27:24
hmm, sorry but, the form is the whole point of the problem, i have no trouble at all placing just the gif there alone in that td, it's just when i entered the script for paypal that it doesn't work anymore.

Also, i cannot put the valign="center" there because it doesn't exist, i'm sure you meant valign="middle". Anyway, it was already there.

I just want to counter effect the bad positioning caused by the paypal form.

But thanks anyway :-)

Report •

Related Solutions

June 1, 2009 at 22:05:31
If the entire page is dynamically generated, then you're going to have modify the original source I think. However, if you're able to edit the head of the doc, then try

<style type="text/css">
   scrollbar-base-color:#A46B4E; {
   style="position: absolute" }

* { margin: 0px; padding: 0px }
td { margin: 5px; padding: 8px }


I tinkered over the frame source alone, so I don't know what effects there will be from within the main page. Nonetheless, it *looked ok* in IE, FF, Opera, and Safari at a res of 1024x768, which is all I've got to test with.

You'll likely want/need to play around with the padding and whatnot, but I *think* part of the problem may be in mixing the inline and block level elements contained within the TDs.

Hope that helps.

Report •

June 2, 2009 at 03:15:18
wow !!!

A huge improvement.

It now looks perfect in IE. Still slightly misaligned in Firefox.

Please take a look at the updated code.

Althought, i never heard of that code before, especially the *

Is it overidding the cellpadding="5" cellspacing="0" i already put for the whole table ? and if yes, how come cellpadding and cellspacing is having an effect on my problem, i already tried changing those before for the whole table but it did not work. Now, It does make a big difference but i'm really puzzled as why.


Report •

June 7, 2009 at 04:13:51
I had a similar issue with alignment, and found the * trick at one of the css tutorial sites... forgotten which now. It acts globally on all document elements, so * { margin: 0px; padding: 0px } strips off native padding and/or margins.

I did notice a slight FF issue. What you could try to do, is use the CSS detection to modify the rule according to what browser the client may be using. However, if your page is dynamic, then I'd just use whatever server side scripting you've got to detect the browser and write the padding / margin on the fly so that it looks the best.


Report •

June 8, 2009 at 08:06:09
Thanks, since i am not as much a guru in coding, i will take a look at your suggestion, and try to learn ;-p

Thanks for the explanation on the *.


Report •

June 9, 2009 at 01:50:32
No worries. :)

I should have mentioned though that the * can be a double-edged sword sort of thing. It works great at a specific thing, but tends to go overboard. It may be best to work with it using a ID selector instead of using it globally.

#myid * {
   margin: 0px; padding: 0px }
<div id="myid">
<table ...>

That way, your overall layout wouldn't be affected, and the native padding / margins for elements contained within the div would be fairly consistent across browsers. You can then override each element as needed.

#myid * {
   margin: 0px; padding: 0px }
#myid p {
   padding: 5px }
#myid td {
   margin: 10px }

Hope that helps.

Report •

June 9, 2009 at 08:19:04
A lot of these codes do not seem to work in firefox, i guess these are ie exclusive codes, like the ones for the color scrollbar.

A day passed without learning is a day lost. So i'm grateful to you because i didn't know that id could be apply to a td.

Thank you for sharing.

Report •

June 9, 2009 at 10:15:23
Yea; the css scrollbars are IE exclusives; however, I read over at the mozilla development zone that there is some sort of hack that can be applied to FF to make them appear; however, I recall correctly, it's a browser tweak that cannot be programmed. I'll have to try and track that down again to verify.

Glad I could help; I've been there too, and that's partly why I try to help if / where I can...

Report •

Ask Question