471,605 Members | 1,431 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

Table Formatting Problem

40
Hi all,

This has been haunting me for over 2 hours 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!

Here's a snapshot of the misaligned portion of the screen:

snapshot link

Here's the code leading up to it. (Note: This code is generated through some conditional PhP statements):

[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" class="cart"></td>
<td width="700" class="cart_header">Your Shopping Cart</td>
<td width="50" class="cart"></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" class="cart"></td>

<td width="700" class="cart_header">&nbsp;</td>
<td width="50" class="cart"></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" class="cart"></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" class="cart"></td>
</tr>
</table>
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" class="cart"></td>
<td width="700" class="cart2">&nbsp;</td>

<td width="50" class="cart"></td>
</tr>
</table>

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td width='50' class='cart'></td><td width='300' class='cart2'>Solo Chenille Braided Rug - Sunny</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' class='cart'></td></tr><tr><td width='50' class='cart'></td><td width='700' class='cart2'>5 feet 6 inches Round ($90)</td><td width='50' class='cart'></td></tr></table>

<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>

<td width="50" class="cart"></td>
<td width="700" class="cart2">&nbsp;</td>
<td width="50" class="cart"></td>
</tr>
</table>[/html]

It's not a CSS issue, as the only difference between class 'cart' and class 'cart2' is font size and weight.

Can anyone tell me what's up??? The PhP generated html code looks like it should align correctly to me.

Thanks in advance.
Nov 26 '07 #1
9 1849
Death Slaught
1,137 1GB
I copied and pasted your code, it's fine without the images so it's probably in your alignment.

Post your CSS your problem is most likely there.

Thanks, Death
Nov 26 '07 #2
vozzek
40
Here is the portion of my css file you requested:

Expand|Select|Wrap|Line Numbers
  1. td.cart {
  2.     background-color:#FFFFFF;
  3.     font-family: Arial, Helvetica, sans-serif;
  4.     color: #1F2E11;
  5.     font-size: 12px;
  6. }
  7.  
  8. td.cart2 {
  9.     background-color:#F9EFF8;
  10.     font-family: Verdana, Arial, Helvetica, sans-serif;
  11.     color: #1F2E11;
  12.     font-size: 12px;
  13. }
  14.  
  15. td.cart_header {
  16.     background-color:#F9EFF8;
  17.     font-family: Verdana, Arial, Helvetica, sans-serif;
  18.     color: #1F2E11;
  19.     font-size: 14px;
  20.     font-weight: bold;
  21. }
  22.  
Thanks for helping out!
Nov 26 '07 #3
Death Slaught
1,137 1GB
I stand corrected, it's not in your CSS, however, there's an easier way to achieve the look you want.

Give me a few seconds and i'll have it for you.

Thanks, Death
Nov 26 '07 #4
vozzek
40
I stand corrected, it's not in your CSS, however, there's an easier way to achieve the look you want.

Give me a few seconds and i'll have it for you.

Thanks, Death
I am 100% SURE I am doing this the hard way. Thanks Death! I've been banging my head over this...
Nov 26 '07 #5
Death Slaught
1,137 1GB
I am 100% SURE I am doing this the hard way. Thanks Death! I've been banging my head over this...
Np most of the stuff you were doing should have been done with CSS. You'll see what I meen in a second.
Nov 26 '07 #6
Death Slaught
1,137 1GB
Ok this is an extremely ruff version, I didn't plan on it being like this, but you should get the idea.

[HTML]<html>

<head>
<style type="text/css">

.left {
float:left;
background-color:pink;
width:150px;
height:225px;
}

.middle {

}

.right {
float:right;
background-color:pink;
width:150px;
height:225px;
}

.heading {
position:absolute;
left:423px;
}

.contents {
position:absolute;
left:250px;
top:90px;
background-color:pink;
width:530px;
}

.space {
width:126px;
}

</style>
</head>

<body>
<div class="left">
</div>

<div class="middle">

<h2 class="heading">Shopping Cart</h2>

<div class="contents">
<form>
<table cellspacing="0">

<tr>
<td>
Your Shopping Cart
</td>
<td class="space">
&nbsp;
</td>
<td class="space">
&nbsp;
</td>
<td class="space">
&nbsp;
</td>
</tr>

<tr>
</tr>

<tr>
</tr>

<tr>
</tr>

<tr>
<td>
Product
</td>
<td>
Price
</td>
<td>
Quantity
</td>
<td>
Total
</td>
</tr>

<tr>
</tr>

<tr>
</tr>

<tr>
</tr>

<tr>
<td>
Solo Chenille <br /> Braided Rug - <br /> Sunny 5 feet 6 <br /> inches Round ($90)
</td>
<td>
$99.00
</td>
<td>
1
</td>
<td>
$99.00
</td>
</tr>


</table>
</form>
</div>
</div>

<div class="right">
</div>
</body>

</html>[/HTML]

I have to go I'll try and explain it tomorrow really sorry.

Hope it helps, Thanks, Death
Nov 26 '07 #7
drhowarddrfine
7,435 Expert 4TB
It's still a little more complicated than it needs to be. "spacers" are dead. Use margin or padding. Some things need adjusting cause I just centered everything:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html{
background-color:#EECBEC; /* Change to background-image:url(yourimage.jpg); */
}
body{
width:800px;
margin:0 auto;
background-color: #000;
}
#banner{
display:block;
width:100%;
height:70px;
}

h3 {
font-size: 14px;
}

table{
width:100%;
}

td{
background-color:#F9EFF8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #1F2E11;
text-align:center;
}
</style>
</head>
<body>

<p><img src="Images/main_box_view_cart.jpg" alt="clothing" id="banner"></p>
<h3>Your Shopping Cart</h3>

<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>
Solo Chenille Braided Rug - Sunny<br>
5 feet 6 inches Round ($90)
</td>
<td>$99.00</td>
<td>1</td>
<td>$99.00</td>
<td></td>
</tr>
</table>
</body>
</html>[/HTML]
Nov 27 '07 #8
drhowarddrfine
7,435 Expert 4TB
You could give the <th> and <td> for the product column a class name of "product" and then in CSS do:
.product{
text-align:left;
padding-left:16px;
}
Nov 27 '07 #9
Death Slaught
1,137 1GB
Thanks drhowarddrfine.

Use drhowarddrfines code, his is alot cleaner than mine, and it's up to standards. Also he's purely a better programmer than me XD! :)

Thanks, Death
Nov 27 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

20 posts views Thread by Andy Fish | last post: by
2 posts views Thread by Leo Duran | last post: by
reply views Thread by Thomas Scheiderich | last post: by
2 posts views Thread by Jeff | last post: by
139 posts views Thread by ravi | last post: by
10 posts views Thread by Greg Lovern | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.