question about images inside tables

[tssracing.com]

I am trying to build some tables with a clickable button inside and the image goes to the top of the cell and the text in the other cells stay centered.

here is the code.

<table width="100%" border="0" cellspacing="3" cellpadding="0">
<TR ALIGN="center" VALIGN="top">
<td style="background-color: #6699CC; border: 2px solid black;">Primary Diameter</TD>
<td style="background-color: #6699CC; border: 2px solid black;">Collector Diameter</TD>
<td style="background-color: #6699CC; border: 2px solid black;">Header Manuf.</TD>
<td style="background-color: #6699CC; border: 2px solid black;">P/N</TD>
<td style="background-color: #6699CC; border: 2px solid black;" colspan="2">Price</TD>
</TR><TR ALIGN="center">
<td style="background-color: #dfe3ee; border: 1px solid gray;">1-3/4"</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">3"</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">Hooker Super Comp.</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">Hooker1</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">$499.99</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;"><form target="main" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="bryan@bryan.com">
<input type="hidden" name="item_name" value="»">
<input type="hidden" name="item_number" value="p/n">
<input type="hidden" name="amount" value="5">
<input type="hidden" name="shipping" value="5">
<input type="hidden" name="image_url" value="http://www.tssracing.com/images/tss_top.gif">
<input type="hidden" name="return" value="http://www.tssracing.com/">
<input type="hidden" name="cancel_return" value="http://www.tssracing.com/">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit">
<input type="hidden" name="add" value="1">
</form></TD>
</TR>

</TABLE>

TIA,
Bryan

[Shto]

Not sure really what you are asking but if you want to align data in one cell use what I have below. Dont align the row like you have <tr align="center"> that will align everyting in that row to the center.


<table width="792" border="0">
<tr>
<td><div align="left">blah</div></td>
</tr>
<tr>
<td><div align="center">blah</div></td>
</tr>
<tr>
<td><div align="right">blah</div></td>
</tr>
</table>

[tssracing.com]

the image within the cell is getting slammed to the top, the text in the other cells is fine.

When I remove the code for the image to make a non clickable button, the problem goes away.

[Shto]

I take it this is the line you have the problem with since it is the only image I see. Try this:

<input name="submit" type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" align="middle" border="0">

[tssracing.com]

I added that and the button is still at the top of the cell.

If I remove all the paypal code and just use the image, the cell looks fine. The other thing is that the size of the cells increase considerably.

example:

<table width="100%" border="0" cellspacing="3" cellpadding="0">
<TR ALIGN="center" VALIGN="top">
<td style="background-color: #6699CC; border: 2px solid black;">Primary Diameter</TD>
<td style="background-color: #6699CC; border: 2px solid black;">Collector Diameter</TD>
<td style="background-color: #6699CC; border: 2px solid black;">Header Manuf.</TD>
<td style="background-color: #6699CC; border: 2px solid black;">P/N</TD>
<td style="background-color: #6699CC; border: 2px solid black;" colspan="2">Price</TD>
</TR><TR ALIGN="center">
<td style="background-color: #dfe3ee; border: 1px solid gray;">1-3/4"</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">3"</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">Hooker Super Comp.</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">Hooker1</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">$499.99</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">
<image src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit">
</form>
</TD>
</TR>

</TABLE>

[Shto]

I tried to remake what you are doing to see the problem but I dont have the problem you do. Can you send me a link to the page that you are working on so I can see it live?

[tssracing.com]

http://www.tssracing.com/pistons/fps_pistons.htm

look at the first row on the tables and notice the button. then look at the relation of the cells to the others.

[ray326]

The image is aligned exactly like the text in the cells below viewing the page in Moz 1.4 so I don't think I'm seeing the problem you're desctibing. You REALLY need to bone up on CSS, though, because you could probably cut 80% of the fat out of that page.

[tssracing.com]

Originally posted by ray326
The image is aligned exactly like the text in the cells below viewing the page in Moz 1.4 so I don't think I'm seeing the problem you're desctibing. You REALLY need to bone up on CSS, though, because you could probably cut 80% of the fat out of that page.

I am using css on the page listed in the url above.

Does the top cell look fatter verticaly than the cells below?

[Shto]

I tried a few things but it looks like it has somethng to do with the form itself I have only had a chance to play with it for a min. I will mess with it a little more and let you know if I find the reason but if you find it before me please post it I would love to know why it is doing what it is doing.

[tssracing.com]

Thanks, I appreciate the help. If I find out what the deal I will give you a shout.

[ray326]

Originally posted by tssracing.com
I am using css on the page listed in the url above.

Does the top cell look fatter verticaly than the cells below?
I see the css on the page now; I was going from your code above. Yes the row with the image button is taller than the rest of the rows.

[ray326]

Just checked it with ie6. Looks like an ie problem.

[tssracing.com]

Originally posted by ray326
Just checked it with ie6. Looks like an ie problem.

know of a way around it?

[ray326]

I think you said removing the form code made it look ok. Try minimizing the form code in that cell (factor everything out that's global) and see what happens. Looks like IE is mistakenly trying to render the white space surrounding the input tags in the form in the cell.

[TomDenver]

Move the <form> and hidden <input> tags outside the table. The main thing is to only have the image link to Paypal inside that <TD> tag. IE doesn't render hidden inputs properly (it adds space for them inside TD tags it seems). Your TD with the image link to Paypal should have only that <input> inside the <TD>, nothing else.

[tssracing.com]

Originally posted by TomDenver
Move the <form> and hidden <input> tags outside the table. The main thing is to only have the image link to Paypal inside that <TD> tag. IE doesn't render hidden inputs properly (it adds space for them inside TD tags it seems). Your TD with the image link to Paypal should have only that <input> inside the <TD>, nothing else.

that fixed it. thanks....

[Shto]

The only problem is that since you moved all the form info outside of the table or lets put it this way you put the table inside the form won't that cause a problem for you to add the other buttons to the page?

[tssracing.com]

Originally posted by Shto
The only problem is that since you moved all the form info outside of the table or lets put it this way you put the table inside the form won't that cause a problem for you to add the other buttons to the page?

I thought about that after the fact and here is what I did.

<table width="100%" border="0" cellspacing="3" cellpadding="0">
<TR ALIGN="center" VALIGN="top">
<td style="background-color: #6699CC; border: 2px solid black;">Primary Diameter</TD>
<td style="background-color: #6699CC; border: 2px solid black;">Collector Diameter</TD>
<td style="background-color: #6699CC; border: 2px solid black;">Header Manuf.</TD>
<td style="background-color: #6699CC; border: 2px solid black;">P/N</TD>
<td style="background-color: #6699CC; border: 2px solid black;" colspan="2">Price</TD></TR>


<form target="main" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="bryan@bryan.com">
<input type="hidden" name="item_name" value="»">
<input type="hidden" name="item_number" value="p/n">
<input type="hidden" name="amount" value="5">
<input type="hidden" name="shipping" value="5">
<input type="hidden" name="image_url" value="http://www.tssracing.com/images/tss_top.gif">
<input type="hidden" name="return" value="http://www.tssracing.com/">
<input type="hidden" name="cancel_return" value="http://www.tssracing.com/">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">

<TR ALIGN="center">
<td style="background-color: #dfe3ee; border: 1px solid gray;">1-3/4"</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">3"</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">Hooker Super Comp.</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">Hooker1</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">$499.99</TD>
<td style="background-color: #dfe3ee; border: 1px solid gray;">
<input name="submit" type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" align="middle">
</TD>
</TR>
<input type="hidden" name="add" value="1">
</form>

</TABLE>

I placed the <form> code in the middle and it works like a champ, and this way I can add other buttons under the same table.

[TomDenver]

Yeah I've done the same thing in the past, I don't think it's valid HTML 4.01 though. It works for now....but sometime in the future it may not I guess. I don't think HTML 4.01 likes <form> or <input> tags existing between <TR>'s or <TD>'s.

I still use what you've done on some pages. Other than making each table row a separate table, I don't know if there's any way around it.

[ray326]

You can use a single form, change the "submit" to a "button" and pass the distinguishing characteristics as parameters to the button's onclick handler. That handler would then set the appropriate hidden field values from its parameters and submit the form.

[tssracing.com]

Originally posted by ray326
You can use a single form, change the "submit" to a "button" and pass the distinguishing characteristics as parameters to the button's onclick handler. That handler would then set the appropriate hidden field values from its parameters and submit the form.

you have an example?

[ray326]

you have an example?
Ok, this is REALLY rough and quite off the top of my head but it seems to do what I expected. Of course I'm just guessing at what the key hidden fields are for you. It also shows how to cure some of the classitis in your table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conforming HTML 4.01 Transitional Template</title>
<style type="text/css">
form th { background-color: #6699CC; border: 2px solid black; }
form td { background-color: #dfe3ee; border: 1px solid gray; }
</style>
<script language="Javascript">
function docart(item_name,item_num,amt,ship)
{
var f = document.orderform;
f.item_name.value = item_name;
f.item_number.value = item_num;
f.amount.value = amt;
f.shipping.value = ship;
f.submit();
}
</script>
</head>
<body>
<form name="orderform" target="main" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="bryan@bryan.com">
<input type="hidden" name="item_name" value="»">
<input type="hidden" name="item_number" value="p/n">
<input type="hidden" name="amount" value="5">
<input type="hidden" name="shipping" value="5">
<input type="hidden" name="image_url" value="http://www.tssracing.com/images/tss_top.gif">
<input type="hidden" name="return" value="http://www.tssracing.com/">
<input type="hidden" name="cancel_return" value="http://www.tssracing.com/">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="add" value="1">

<table width="100%" border="0" cellspacing="3" cellpadding="0">
<TR ALIGN="center" VALIGN="top">
<th>Primary Diameter</th>
<th>Collector Diameter</th>
<th>Header Manuf.</th>
<th>P/N</th>
<th colspan="2">Price</th>
</TR>

<TR ALIGN="center">
<td>1-3/4"</TD>
<td>3"</TD>
<td>Hooker Super Comp.</TD>
<td>Hooker1</TD>
<td>$499.99</TD>
<td>
<img src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" onclick='docart("Hooker Super Comp.","Hooker1","499.99","5.00")'>
</TD>
</TR>
</TABLE>

</form>

</body>
</html>