td overflow on javascript-html-css run tables.

Hey all. It's me again. Only I'm usually seen in the CSS department >.>

Anyway, on to the issue....
I'm a complete noob to Javascript. As in I've NEVER used it before. Ever.

I've used PayPal Shop Maker to give me some general javascripting to work with and kindof try to stumble around with.
I've got things going pretty good... the only problem I'm having now is the fact that the Shopping cart overflows the table size in every part of the shop (including checkout etc...) no matter what I try.
I've tried changing specific widths for the table, the tr, the td... I've tried removing and adding positive and negative margins and paddings in the css...nothing is working. I've even tried a few Javascript width hacks that I found online and nothing seems to be working at all...

Keep in mind that I'm a total Javascript noob and probably won't understand any JS jargon and terms... Here is the code for the specific table. (I've not linked the images and have changed some of the wording due to copyright and privacy agreements, but it comes down to the same thing)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="0">
<script language="JavaScript" src="ewmenu.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
EW_ROOT_PATH = ""; // configure root path
ew_cartAction = 0; // Load cart
//-->
</script>
<script language="JavaScript" src="ewcartconfig.js"></script>
<script language="JavaScript" src="ewcart.js"></script>
<title>shop</title>
<link href="styles/style_template.css" rel="stylesheet" type="text/css" />
<style>
#nav_tabs ul {
list-style-type: none;
background-image: url(../images/bg_navShop.png);
height: 62px;
width: 681px;
background-repeat: no-repeat;
margin-left: 15px;
padding-left: -15px;
margin-bottom: 0px;
}
#store {
height: 320px;
width: 450px;
margin-top: -10px;
overflow-y: scroll;
}
h4 {
font-size: 1em;
text-transform: lowercase;
}
.description {
padding-left: 20px;
}
/* -------------------- SHOP SCRIPT STYLES - !DO NOT MODIFY! ------------------------- */
.paypalshopmaker {
color: ; /* text color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
width: 445px;
}
input, textarea, select {
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
} 
/* search table */
.ewSearch {
width: 100%; /* table width */
color: ; /* text color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
border: 0px outset; /* border */
border-collapse: collapse;
}
/* main table */
.ewTable {
width: 180px; /* table width */
color: ; /* text color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
border: 0px outset; /* border */
border-collapse: collapse;
}
/* main table data cells */
.ewTable td {
padding: 0px; /* cell padding */
border: 0px solid; /* cell spacing */
border-color: #FFFFFF; /* table background color */
}
/* tables in main table */
.ewTable td table {
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
}
/* main table header cells */
.ewTableHeader {
background-color: #FFFFFF; /* header color */
color: #FFFFFF; /* header font color */
vertical-align: top;
}
.ewTableHeader a {
color: #FFFFFF; /* header font color */
}
/* main table row color */
.ewTableRow {
background-color: #FFFFFF; /* alt row color 1 */
}
/* main table alternate row color */
.ewTableAltRow {
background-color: #FFFFFF; /* alt row color 2 */
}
/* item table */
.ewItemTable {
color: ; /* text color */
font-family: Verdana; /* font name */
font-size: xx-small; /* font size */
border: 0px outset; /* border */
border-collapse: collapse;
}
/* item table data cells */
.ewItemTable td {
padding: 2px; /* cell padding */
border: 0px solid; /* cell spacing */
border-color: #FFFFFF; /* table background color */
}
/*
--------------------------------------------------------------------------------
Template General Layout
--------------------------------------------------------------------------------
*/
.ewMain {
border-collapse: collapse;
border: none;
height: 100%;
}
/* Middle column (Content column) */
.ewMidColumn {
padding: 0;
vertical-align: top;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
width: 445px;
}
/* Bottom cell (Shopping cart column) */
.ewRightColumn {
background-color: #FFFFFF;
padding: 4px;
border-right-style: none;
border: 1px solid #C5C5C5;
width: 445px;
vertical-align: top;
}
/*
--------------------------------------------------------------------------------
Shopping Cart
--------------------------------------------------------------------------------
*/
/* main table (in checkout page) */
.ewTable1 {
width: 445px;
border-collapse: collapse;
border: none;
font-family: Verdana;
font-size: xx-small;
background-color: #FFFFFF;
}
/* simple table header cells */
.ewTable0Summary {
font-weight: bold;
}
/* message */
.ewMessage {
font-family: Verdana;
font-size: xx-small;
}
.ewWarning {
color: #CC0000;
font-family: Verdana;
font-size: xx-small;
}
/* -------------------- END SHOP SCRIPT STYLES ------------------------- */
</style>
<!--[if IE]>
<style>
a img {
border: none;
}
#container2 {
padding-top: 10px;
}
</style>
<![endif]-->
<link href="styles/style_shop.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="content">
<!-- BEGIN STORE SECTION -->
<div id="store">
<!-- BEGIN SHOPPING SECTION -->
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" 
class="ewMain">
<tr>
<!-- Begin Content row -->
<td valign="top" class="ewMidColumn">
<!-- list template customizable area begin -->
<table class="ewTable">
<tr class="ewTableAltRow">
<!-- BEGIN STARTER KIT SECTION //-->
<form name="pp1" onSubmit="return SubmitItemToCart(this);">
<td valign="top">
<table width="222px" border="0" cellspacing="0" cellpadding="0"><tr><td>
<div id="starterKit" class="products">
<img src="images/starterkitBOXsmallSize.png">
<h4 class="description">Clean Off Your Desk Starter Kit</h4>
<em>Includes:</em>
<ul>
<li>The thing that is item 1 (incl. template)</li>
<li>30 somethings</li>
<li>1 other thing</li>
<li>30 something or others</li>
<li>1 sharpie pen</li>
</ul>
</div>
<input type="hidden" name="id" value="1">
<input type="hidden" name="amount" value="65">
<input type="hidden" name="amount_base" value="65">
<!-- Discount type -->
<input type="hidden" name="discounttype" value="0">
<!-- Tax type -->
<input type="hidden" name="taxtype" value="0">
<!-- Ship type -->
<input type="hidden" name="shiptype" value="0">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="item_name" value="clean off your desk starter kit">
<br>
<table class="ewItemTable">
<tr><td>Price:</td><td style="white-space: nowrap"><div id="div_amount_1" 
name="div_amount_1">$65.00 </div></td></tr>
</table>
<input type="image" src="images/cart.gif" border="0" name="submit" alt="">
</td></tr></table>
</td>
</form>
<script language="JavaScript">
<!--
UpdatePrice(document.pp1); // initialize option price
//-->
</script>
<!-- END STARTER KIT SECTION //-->
<!-- BEGIN REFILL SECTION //-->
<form name="pp2" onSubmit="return SubmitItemToCart(this);">
<td valign="top">
<table width="170px" border="0" cellspacing="0" cellpadding="0"><tr><td>
<div id="refills" class="products">
<img src="images/starterkitRefills---Smaller.png">
<h4>The thing that is item 2</h4>
<em>Includes:</em>
<ul>
<li>30 somethings</li>
<li>30 other things</li>
<li>1 sharpie pen</li>
</ul>
</div>
<input type="hidden" name="id" value="2">
<input type="hidden" name="amount" value="23">
<input type="hidden" name="amount_base" value="23">
<!-- Discount type -->
<input type="hidden" name="discounttype" value="0">
<!-- Tax type -->
<input type="hidden" name="taxtype" value="0">
<!-- Ship type -->
<input type="hidden" name="shiptype" value="0">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="item_number" value="2">
<input type="hidden" name="item_name" value="Refill Set">
<br>
<table class="ewItemTable">
<tr><td>Price:</td><td style="white-space: nowrap"><div id="div_amount_2" 
name="div_amount_2">$23.00 </div></td></tr>
</table>
<input type="image" src="images/cart.gif" border="0" name="submit" alt="">
</td></tr></table>
</td>
</form>
<script language="JavaScript">
<!--
UpdatePrice(document.pp2); // initialize option price
//-->
</script>
<!-- END REFILL SECTION //-->
</tr>
</table>
<br>
<br>
<p>&nbsp;</p>
</td></tr>
<!-- End Content row -->
<!-- END SHOPPING SECTION -->
<!-- BEGIN CART SECTION -->
<!-- Begin Cart row -->
<tr>
<td width="100%" valign="top" class="ewRightColumn">
<p><b><div class="paypalshopmaker">Shopping Cart</div></b></p>
<!-- Note: DO NOT CHANGE THE IDs! -->
<div id="ewCartView0"></div>
<div id="ewCartButton0"><a href="checkout.html"><img 
src="images/Button_BuyNow.png" alt="Checkout" border="0"></a></div>
<script language="JavaScript">
<!--
CartView(0);
//-->
</script>
</td>
<!-- End Cart row -->
</tr>
</table>
<!-- END CART SECTION -->
<!-- End Cart column -->
</div>
<!-- END STORE SECTION -->
  </div>
 </div>
</div>
</body>
</html>

td overflow on javascript-html-css run tables.

The shopping cart overflows the main table. Why oh why?

AmandaTambeau

rocknbil

AmandaTambeau

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week