Hi all,
This has been haunting me for over a day now, and I can't understand what's wrong with it. My shopping cart table's format is misaligned, and I have no clue why. Please help!
My PHP code is pulling the cart contents from my SQL database, and then generating html to create the format. The html looks fine, and the good people on the html forum can't find the problem either. I think the PHP must be the issue.
Here's a snapshot of the misaligned portion of the screen:
Here's the html code when the page source is viewed:
[HTML]<table width="800" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><img src="Images/main_box_view_c art.jpg" alt="Clothing" width="800" height="70" /></td>
</tr>
<tr>
<td><img src="Images/spacer_20.jpg" alt="Clothing" width="800" height="20" /></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50" bgcolor="#FFFFF F"></td>
<td width="700" class="cart_hea der">Your Shopping Cart</td>
<td width="50" bgcolor="#FFFFF F"></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50" bgcolor="#FFFFF F"></td>
<td width="700" class="cart2">& nbsp;</td>
<td width="50" bgcolor="#FFFFF F"></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50" bgcolor="#FFFFF F"></td>
<td width="300" class="cart_hea der">Product</td>
<td width="100" class="cart_hea der">Price</td>
<td width="220" class="cart_hea der">Quantity</td>
<td width="80" class="cart_hea der">Total</td>
<td width="50" bgcolor="#FFFFF F"></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50" bgcolor="#FFFFF F"></td>
<td width="700" class="cart2">& nbsp;</td>
<td width="50" bgcolor="#FFFFF F"></td>
</tr>
</table>
<table width='800' border='0' align='center' cellpadding='0' cellspacing='0' >
<tr><td width='50' bgcolor='#FFFFF F'></td><td width='300' class='cart2'>S olo Chenille Braided Rug - Cornflower</td><td width='100' class='cart2'>$ 99.00</td><td width='220' class='cart2'>1 </td><td width='80' class='cart2'>$ 99.00</td><td width='50' bgcolor='#FFFFF F'></td></tr><tr><td width='50' bgcolor='#FFFFF F'></td><td width='700' class='cart2'>5 '6'' Round ($60)</td><td width='50' bgcolor='#FFFFF F'></td></tr></table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50" bgcolor='#FFFFF F'></td>
<td width="700" class="cart2">& nbsp;</td>
<td width="50" bgcolor='#FFFFF F'></td>
</tr>
</table>[/HTML]
Now here's the PHP code that generates the item line(s) in the above code:
[PHP]
<table width='800' border='0' align='center' cellpadding='0' cellspacing='0' >
<?php
// current session id
$sid = session_id();
$sql = "SELECT *
FROM tbl_cart, inventory
WHERE tbl_cart.pd_id = inventory.id
AND tbl_cart.ct_ses sion_id = '$sid'
";
$result = mysql_query($sq l) or die(mysql_error ());
if (mysql_num_rows ($result) == 0) {
echo "<tr>";
echo "<td width='50' bgcolor='#FFFFF F'></td>";
echo "<td width='700' class='cart2'>Y OUR SHOPPING CART IS EMPTY</td>";
echo "<td width='50' bgcolor='#FFFFF F'></td>";
echo "</tr>";
} else {
while ($row = mysql_fetch_arr ay($result)) {
echo "<tr>";
echo "<td width='50' bgcolor='#FFFFF F'></td>";
echo "<td width='300' class='cart2'>" ;
echo $row['name']."</td>";
echo "<td width='100' class='cart2'>" ;
echo "$".$row['price'].".00</td>";
echo "<td width='220' class='cart2'>" ;
echo $row['ct_qty']."</td>";
echo "<td width='80' class='cart2'>" ;
echo "$".$row['price'].".00</td>"; // Quantity * Price
echo "<td width='50' bgcolor='#FFFFF F'></td>";
echo "</tr>";
if ($row_rs_tbl_ca rt['ct_opt_a']) {
echo "<tr>";
echo "<td width='50' bgcolor='#FFFFF F'></td>";
echo "<td width='700' class='cart2'>" ;
echo $row['ct_opt_a']."</td>";
echo "<td width='50' bgcolor='#FFFFF F'></td>";
echo "</tr>";
}
}
}
?>
</table>
[/PHP]
As far as CSS being the problem, the only difference between 'cart2' and 'cart_header' is font size and weight. But just in case, here's that code too:
td.cart2 {
background-color:#F9EFF8;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #1F2E11;
font-size: 12px;
}
td.cart_header {
background-color:#F9EFF8;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #1F2E11;
font-size: 14px;
font-weight: bold;
}
Lastly, I know I'm doing this arse-backwards... just still learning and trying to figure things out.
Anyone see the problem? Thanks in advance.