473,231 Members | 1,643 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,231 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 2079
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

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

Similar topics

20
by: Andy Fish | last post by:
Hi All, I have a nice easy table and/or CSS formatting problem for any gurus out there. I have a table with 4 columns - no "width" attribute on anything. Some rows have 4 cells in (call...
4
by: deko | last post by:
I've heard it's best not to have any formatting specified for Table fields (except perhaps Currency), and instead set the formatting in the Form or Report. But what about Yes/No fields? When I...
4
by: Dave Brydon | last post by:
Access 2003 I have a combo box in my personnel table, which draws its data from a trade code table; the original field in the code table, is numeric, Long Integer, and formatted with 5 zero's . ...
2
by: Leo Duran | last post by:
Hi, I am working on an app right now that makes extensive use of the DataList control. I chose the DataList because I need to do multi row formatting. I am using it like so.
0
by: Thomas Scheiderich | last post by:
I have a table that has 3 image slices. The middle slice changes size based on size of browser window. This works great. My client wants the date to show over the image on the right. So what I...
10
by: Coleen | last post by:
Hi all :-) I have a weird formatting problem with an HTML table that I am populating using VB.Net and HTML. Here is the snippet of code for the cell I'm trying to format: Dim...
2
by: Jeff | last post by:
I've been trying for days to figure out why the spacing between the rows on the left-most column of my table is screwy. Take a look here: http://mypage.iu.edu/~jbeverid/index_new.htm Right...
139
by: ravi | last post by:
Hi can anybody tell me that which ds will be best suited to implement a hash table in C/C++ thanx. in advanced
10
by: Greg Lovern | last post by:
I have a very large html table created by MS Word, saved as it's "Web Page, Filtered" file type. Every html table cell has lots of formatting tags. Most of the file size is that formatting. Is...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...

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.