Google Checkout logo demands its own line. How to prevent?

Leafgreen · #1 (**permalink**) 03-26-10, 07:01 PM

Hi all and TIA for your help.

I want to add this Google Checkout provided script to add to a table row of other logos.

Code:

<div id="googleCheckoutLogo"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=4181961xxxxxxxx&loc=en_US&f=png' ></script>

But when I put it in between the other logos, it causes a line break above and below. Is there a way to make it stay on the same row?

BTW, when I remove <div id="googleCheckoutLogo"></div> then the logo does not appear.

wirehopper · #2 (**permalink**) 03-26-10, 07:22 PM

HTML Code:

<head>
<style type="text/css">
.row div
{
float:left;
}
</style>
</head>
<body>
<div class="row">
<div id="googleCheckoutLogo"></div>
<div id="anotherlogo"><img src="logo.gif" /></div>
</div>

Not tested

Leafgreen · #3 (**permalink**) 03-26-10, 07:27 PM

ok so where do I put <script src='https://checkout.google.com/buttons/logos?merchant_id=4181961xxxxxxxx&loc=en_US&f=png' ></script> in your code?

wirehopper · #4 (**permalink**) 03-26-10, 07:37 PM

Right after the div - as you had it. I didn't copy it because it was long. The float left should solve the alignment issue.

Leafgreen · #5 (**permalink**) 03-26-10, 07:55 PM

Wirehopper Thank you I tried to make it work, but it didn't work because I've got all this other crap. I'm just going to give it all to you

and hopefully you can make it work.

HTML Code:

 <td align="center" valign="middle"><table align="center" border="0">
                        <tr valign="middle">
                                                  
                            </td>
<style type="text/css">
.row div
{
float:left;
}
</style>
<div class="row">
<div id="anotherlogo"><!-- Begin Official PayPal Seal -->
                            <a href="https://www.paypal.com/us/verified/pal=xxxxxxxxxx" target="_blank"><img src="http://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0" alt="xxxxxxx"></A>
                            <!-- End Official PayPal Seal --></div>
<div id="anotherlogo"><script language="Javascript" src="https://seal.godaddy.com/getSeal?sealID=xxxxxxxxxxxxxxxxxx"></script></div>
<div id="googleCheckoutLogo"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=4181961xxxxxxxxxx&loc=en_US&f=png' ></script>
      </div>

 <div id="anotherlogo">  <img src="/xxxxxxxxxxx" alt="The xxxxxx." title="xxxxxx." width="" height=""> </div>
<div id="anotherlogo"><a href="xxxxxxxxx" ><img src="/xxxxxxxxxx" border="0" alt="xxxxxx." title="xxxxxxxxx." width="" height=""></a></div>
						 </tr>
                      </table>

wirehopper · #6 (**permalink**) 03-26-10, 09:01 PM

ids have to be unique. When I wrote "id='anotherlogo'" I was just giving a placeholder.

You don't have to give them ids, I put one on there in case you had more divs like that.

The Google one is probably all set, now, just add new divs as you need to, and assign them ids as necessary, or not at all.

The .row div in the style tags means that for all divs contained in a container of class row should be floated left, meaning without breaks between them.

A great resources is W3Schools Online Web Tutorials.

Keep going, your code is coming along nicely.

Leafgreen · #7 (**permalink**) 03-26-10, 09:14 PM

I tried all these:
* change <div id="anotherlogo"> to <div>
* change <div id="anotherlogo"> to <div id="">
* change <div id="anotherlogo"> to <div id="1">, <div id="2">, and so on.
Still same result. Please see the attached pic.

wirehopper · #8 (**permalink**) 03-27-10, 06:20 PM

Please post your code, it's probably something small.

Leafgreen · #9 (**permalink**) 03-29-10, 02:12 AM

Wirehopper solved my problem by creating a css style:
.row div
{
height:100px;
float:left;
}
.googleCheckoutLogo,.godaddy
{
padding:25px 0;
}

Then, before the set of logos, we put <div class="row">
Then before and after each logo, I just add a <div></div>

Done! Thank you Wirehopper!!!!!!!!!!
!!!!!!!
!!!!!!!!

Leafgreen · #10 (**permalink**) 03-31-10, 05:27 PM

Hey Wirehopper, were you able to figure out the middle vertical alignment? That part is not working...