Buy Now and Alignment/Text/Table

@CrasterNov 23.2007

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?

to post a comment

HTML

5 Comments(s) _↴

@WebJoelNov 24.2007 — #We need to see your code

@CrasterauthorNov 24.2007 — #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

@WebJoelNov 25.2007 — #Insomuch as this [I]is[/I] 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">[B]<div align="center" class="style19">Qty</div>[/B]</th>

<th width="49" bgcolor="#8E7E53" class="style16" scope="col">[B]<div align="center" class="style19">Cost</div>[/B]</th>

<th width="42" bgcolor="#8E7E53" class="style16" scope="col">[B]<div align="center" class="style19">P&P</div>[/B]</th>

 <th width="86" bgcolor="#8E7E53" class="style16" scope="col">[B]<div align="center" class="style19">Total</div>[/B]</th>
   <th width="70" bgcolor="#8E7E53" class="style16" scope="col">&nbsp;</th>
   </tr>
   <tr>
   <th height="21" class="style16" scope="row"><[B]div align="center" class="style19">1</div>[/B]</th>
   <td class="style16"><div align="center" class="style19">£9.99</div></td>
   <td class="style16">[B]<div align="center" class="style19">£0.90</div>[/B]</td>
 
   <td class="style16">[B]<div align="center" class="style20">£10.89 </div>[/B]</td>
   <td class="style16"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
   [B]<div align="left" class="style3">
   <div align="center" class="style6">[/B]
 
   .... (  removed code to stop horizontal scrolling in quote-view tags  ) ...
 
   [B]</div>
   </div>[/B]
   </form></td>
   </tr>
 
   <tr>
   <th height="24" class="style16" scope="row">[B]<div align="center" class="style19">2</div>[/B]</th>
   <td class="style16">[B]<div align="center" class="style19">£18.95</div>[/B]</td>
   <td class="style16">[B]<div align="center" class="style19">£1.80</div>[/B]</td>
 
   <td class="style16">[B]<div align="center" class="style19">£20.75 </div>[/B]</td>
   <td class="style16"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" class="style3">
   [B]<div align="center" class="style6">[/B]....[/QUOTE]

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

[upl-file uuid=13f38a51-efa6-41f7-b468-379ed833b7ea size=33kB]ScreenHunter_3.gif[/upl-file]

@WebJoelNov 26.2007 — #First, -let's get the DIVs out of the "<TD>"s......<table [B]id="thisTable"[/B] 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&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>...[/QUOTE] and add this to your CSS:[B]#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;}[/B][/QUOTE] We target the TABLE in question with an ID="thisTable", and 'style' the rules.

"[B]border-collapse[/B]" on the [B]#thisTable[/B]

and

[B]margin:0;[/B] on the [B]#thisTable td form[/B] 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.

@CrasterauthorNov 26.2007 — #Thank you ill give this a try!

Also in #HTML _↴

Button to play .wav or .mp3 clips Absolutely Positioned Scrollable Area website mobile view problem

Success!

Help @Craster spread the word by sharing this article on Twitter...

Tweet This

Buy Now and Alignment/Text/Table

5 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Buy Now and Alignment/Text/Table

5 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #HTML _↴