Buy Now and Alignment/Text/Table

[Craster]

Hello,

Im getting really pee'd off with Buy Now Buttons! aka forms.

i have a table and the last column i enter a buy now button from paypal, and it keeps making the table out of shape, i cant get it to fit perfectly like the size it should be.

Can anyone help me out ?

Thanks In Advance,

Craster:(

[WebJoel]

We need to see your code

[Craster]

Here is the test page ignore the buttons on the far right hand side, for some reason the button rises the column, i wanted it in its own column next to it but it just resizes each row, and well that doesn't look very professional.

http://www.federal-media.co.uk/after/items.html

I really want the buy now button in a seperate column on the right hand side of the Total price.

Cheers

[WebJoel]

Insomuch as this is tablular data it does correctly belong in a TABLE layout... -but what's with the "<div>"s in the "<td>"s? This is totally uncesessary and confuses everything:...<table width="310" border="1" align="center" bordercolor="#B2A37B" bgcolor="#DAD2C0">
<tr>
<th width="29" height="24" bgcolor="#8E7E53" class="style16" scope="col"><div align="center" class="style19">Qty</div></th>
<th width="49" bgcolor="#8E7E53" class="style16" scope="col"><div align="center" class="style19">Cost</div></th>
<th width="42" bgcolor="#8E7E53" class="style16" scope="col"><div align="center" class="style19">P&amp;P</div></th>

<th width="86" bgcolor="#8E7E53" class="style16" scope="col"><div align="center" class="style19">Total</div></th>
<th width="70" bgcolor="#8E7E53" class="style16" scope="col">&nbsp;</th>
</tr>
<tr>
<th height="21" class="style16" scope="row"><div align="center" class="style19">1</div></th>
<td class="style16"><div align="center" class="style19">£9.99</div></td>
<td class="style16"><div align="center" class="style19">£0.90</div></td>

<td class="style16"><div align="center" class="style20">£10.89 </div></td>
<td class="style16"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<div align="left" class="style3">
<div align="center" class="style6">

.... ( removed code to stop horizontal scrolling in quote-view tags ) ...

</div>
</div>
</form></td>
</tr>

<tr>
<th height="24" class="style16" scope="row"><div align="center" class="style19">2</div></th>
<td class="style16"><div align="center" class="style19">£18.95</div></td>
<td class="style16"><div align="center" class="style19">£1.80</div></td>

<td class="style16"><div align="center" class="style19">£20.75 </div></td>
<td class="style16"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" class="style3">
<div align="center" class="style6">....

Attached is a screengrab of what is going on (colored borders added to show boundries being called)

[WebJoel]

First, -let's get the DIVs out of the "<TD>"s......<table id="thisTable" width="300" border="1" align="center" bordercolor="#B2A37B" bgcolor="#DAD2C0">
<tr>
<th width="29" height="24" bgcolor="#8E7E53" class="style16" scope="col">Qty</th>
<th width="49" bgcolor="#8E7E53" class="style16" scope="col">Cost</th>
<th width="42" bgcolor="#8E7E53" class="style16" scope="col">P&amp;P</th>
<th width="86" bgcolor="#8E7E53" class="style16" scope="col">Total</th>
<th width="60" bgcolor="#8E7E53" class="style16 style23" scope="col">Buy Now</th>
</tr>
<tr>

<th height="21" class="style16" scope="row">1</th>
<td class="style16">£9.99</td>
<td class="style16">£0.90</td>
<td class="style16">£10.89</td>
<td class="style16">

--form data removed ---

</td>
</tr>
<tr>
<th height="21" class="style16" scope="row">2</th>
<td class="style16">£18.95</td>
<td class="style16">£1.80</td>
<td class="style16">£20.75</td>

<td class="style16">

--- form data removed ---

</td>
</tr>
<tr>
<th height="25" class="style16" scope="row">3</th>
<td class="style16">£27.95</td>
<td class="style16">£2.70</td>
<td class="style16">£30.65</td>
<td class="style16">

--- form data removed ---


</td>
</tr>
<tr>
<th height="24" class="style16" scope="row">4</th>
<td class="style16">£36.95</td>
<td class="style16">£3.60</td>
<td class="style16">£40.55</td>
<td class="style16">

--- form data removed ---

</td>
</tr>
<tr>
<th height="25" class="style16" scope="row">5</th>
<td class="style16">£45.90</td>
<td class="style16">£4.50</td>
<td class="style16">£50.40</td>

<td class="style16">

--- form data removed ---

</td>
</tr>
<tr>
<th height="25" class="style16" scope="row">6</th>
<td class="style16">£54.85<</td>
<td class="style16">£5.40</td>
<td class="style16">£60.25</td>
<td class="style16">

--- form data removed ---

</td>
</tr>
</table>... and add this to your CSS:#thisTable { border-collapse: collapse }
#thisTable th {text-align:center; font-size:14px; text-align:center;}
#thisTable td {color:black; font-size:14px; text-align:center;}
#thisTable td form {margin:0; text-align:center;} We target the TABLE in question with an ID="thisTable", and 'style' the rules.

"border-collapse" on the #thisTable

and

margin:0; on the #thisTable td form solves it.

the rest merely styles the data. Gets rid of that superfluous DIV-in-TD-.style9 bloat. :rolleyes:

Looks exactly the same in IE6 and Firefox.

[Craster]

Thank you ill give this a try!