The google checkout logo provided to merchants via their integration tools is badly done. Again, google screws up the coding.. it seems they're very good at everything apart from producing helpful code for its users.
Anyway, the standard google checkout code looks like this..
<div id="googleCheckoutLogo"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=839472364834&loc=en_GB&f=png' ></script>
Unfortunately, when you add this to your page, it creates a badly aligned image. Using Firebug, The CSS from google shows the following for the ID '#badge_container', for reasons only known to google. Badge_container tell s the logo how to be positioned.
<div id="badge_container" style="width: 200px; padding-left: 20px; padding-top: 10px; left: 22px;">
It also shows some CSS positioning for the <img> tag too, but we dont need to go into that.
Becuase google have added this as inline CSS by use of the 'style=""', we cant overwrite any of the positioning elements mentioned by using our own CSS. So, the only thing we can do is add something that ISNT mentioned in the above google code, as follows:
#badge_container {margin: -10px 0 0 -20px;}
margin isnt used in the google code, so we can safely use it in ours.
Bit of a bodge, but it works.
Last changed: Aug 11 2010 at 9:04 AM
BackComments
| None Found |
Add Comment
