Forum Moderators: open
<!--#### BUTTON 1 Our Merchant-->
<a href="checkout.php"><img src="images/credit_card_logos.gif" alt="Checkout Using Our Secure Server"></a><!--#### BUTTON 2 Google Checkout -->
<form method="post" action="https://checkout.google.com/cws/v2/Merchant/123456/checkoutForm" accept-charset="utf-8">
<input type="hidden" name="item_name_1" value="Widget">
<input type="hidden" name="item_price_1" value="10.99">
<input type="image" name="Google Checkout" alt="Fast checkout through Google" src="https://checkout.google.com/buttons/checkout.gif?merchant_id=123456&w=160&h=43&style=white&variant=text&loc=en_US">
</form>
<!--#### BUTTON 3 PayPal Checkout -->
<form method="post" action="Start_PP_API.php">
<input type="hidden" name="L_NAME1" value="Widget">;
<input type="hidden" name="L_AMT1" value="10.99">;
input type="image" src='http://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif'>
</form>
Can anyone suggest a way to get these in a straight horizontal line?
There are a few ways to get this done with CSS alone.
First you can make it inline and if any of them ends up in the wrong position, find a way to select it and nudge it using relative positioning.
e.g.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
background-color: fuchsia;
}
#checkout {
text-align: center;
padding-top: 12px;
margin-bottom: -4px;
}
#checkout a, #checkout form {
display: inline;
}
#checkout fieldset {
display: inline-block;
border: 0;
}
#checkout a img {
border: 0;
position:relative;
bottom: 12px;
}
</style>
</head>
<body>
<p>BEFORE</p>
<div id="checkout">
<!-- BUTTON 1 Our Merchant-->
<a href="checkout.php"><img src="2s.jpg" alt="Checkout Using
Our Secure Server" /></a>
<!-- BUTTON 2 Google Checkout -->
<form method="post" action="#"
accept-charset="utf-8">
<fieldset>
<input type="hidden" name="item_name_1" value="Widget" />
<input type="hidden" name="item_price_1" value="10.99" />
<input type="image" name="Google Checkout" alt="Fast checkout
through Google" src="https://checkout.google.com/buttons
/checkout.gif?merchant_id=123456&w=160&h=43&
style=white&variant=text&loc=en_US" />
</fieldset>
</form>
<!-- BUTTON 3 PayPal Checkout -->
<form method="post" action="#">
<fieldset>
<input type="hidden" name="L_NAME1" value="Widget" />
<input type="hidden" name="L_AMT1" value="10.99" />
<input type="image" src='http://www.paypal.com/en_US/i/btn
/btn_xpressCheckout.gif' />
</fieldset>
</form>
</div>
<p>AFTER</p>
</body>
</html>
I did mess a bit with the html to make it valid code.
I did break some lines to prevent the forum from scrolling sideways, glue them back together ...
The other way is to use a container that has position (e.g. by giving it position:relative, and then use absolute positioing to place the children whereever you like.
