EDIT: Nevermind, I fixed this by using a <BR /> instead of trying to write option_a to a new row of the table. Thanks all!
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_cart.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="#FFFFFF"></td>
<td width="700" class="cart_header">Your Shopping Cart</td>
<td width="50" bgcolor="#FFFFFF"></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" bgcolor="#FFFFFF"></td>
<td width="700" class="cart2"> </td>
<td width="50" bgcolor="#FFFFFF"></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" bgcolor="#FFFFFF"></td>
<td width="300" class="cart_header">Product</td>
<td width="100" class="cart_header">Price</td>
<td width="220" class="cart_header">Quantity</td>
<td width="80" class="cart_header">Total</td>
<td width="50" bgcolor="#FFFFFF"></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" bgcolor="#FFFFFF"></td>
<td width="700" class="cart2"> </td>
<td width="50" bgcolor="#FFFFFF"></td>
</tr>
</table>
<table width='800' border='0' align='center' cellpadding='0' cellspacing='0'>
<tr><td width='50' bgcolor='#FFFFFF'></td><td width='300' class='cart2'>Solo 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='#FFFFFF'></td></tr><tr><td width='50' bgcolor='#FFFFFF'></td><td width='700' class='cart2'>5'6'' Round ($60)</td><td width='50' bgcolor='#FFFFFF'></td></tr></table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" bgcolor='#FFFFFF'></td>
<td width="700" class="cart2"> </td>
<td width="50" bgcolor='#FFFFFF'></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_session_id = '$sid'
";
$result = mysql_query($sql) or die(mysql_error());
if (mysql_num_rows($result) == 0) {
echo "<tr>";
echo "<td width='50' bgcolor='#FFFFFF'></td>";
echo "<td width='700' class='cart2'>YOUR SHOPPING CART IS EMPTY</td>";
echo "<td width='50' bgcolor='#FFFFFF'></td>";
echo "</tr>";
} else {
while ($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td width='50' bgcolor='#FFFFFF'></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='#FFFFFF'></td>";
echo "</tr>";
if ($row_rs_tbl_cart['ct_opt_a']) {
echo "<tr>";
echo "<td width='50' bgcolor='#FFFFFF'></td>";
echo "<td width='700' class='cart2'>";
echo $row['ct_opt_a']."</td>";
echo "<td width='50' bgcolor='#FFFFFF'></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.