Problem 3 - Skewy products on my home page

[raquelann]

Can anyone please help...
My home page has both New Products & Monthly Specials For July listed in the middle column toward the bottom. They are all "skewiff" and I don't know why. Can anyone shed some light at all please.
http://www.oddsnsods.com.au

[barco57]

Your problems are much larger than is apparent in IE. Take a look at it in firefox....
I would be interested to see what hacking and slashing you did in the tpl_header.php or what strange stuff is going on in the stylesheet.....in firefox there is all sorts of overlapping in the header and left, center, and right columns are off the page to the right.......

[raquelann]

Ok...thanks firstly - but AAAARRRGGGGHHHH
My stylesheet is as follows:

/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: stylesheet.css 5347 2006-12-22 20:26:09Z birdbrain $
*/
body {
margin: 40;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 80%;
color: #000000;
background-color: #0000b7;
}
a img {border: none; }
a:link, #navEZPagesTOC ul li a {
color: #000000;
text-decoration: none;
}

a:visited {
color: #000000;
text-decoration: none;
}
a:hover, #navEZPagesTOC ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #c06c3a;
}
a:active {
color: #0000FF;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.7em;
}
h3 {
font-size: 1.3em;
}
h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}
.biggerText {
font-size: 1.5em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0.3em 3px;
}
CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}
FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
margin: 0.1em;
}
TEXTAREA {
/* float: left;*/
margin: auto;
display: block;
width: 80%;
}
input:focus, select:focus, textarea:focus {
background: #000000;
}
FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 0px solid #000000;
}
LEGEND {
font-weight: bold;
padding: 0.3em;
}
LABEL, h4.optionName {
line-height: 1.5em;
padding: 0.2em;
}
LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em;
}
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}
LABEL.inputLabel {
width: 11em;
float: left;
}
LABEL.inputLabelPayment {
width: 15em;
float: left;
}
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 12em;
float: left;
}
P, ADDRESS {
padding: 0.5em;
}
ADDRESS {
font-style: bold;
}
}
HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 0px solid #000000;
}
/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #000000;
}
.messageStackWarning, .messageStackError {
background-color: #ffffff;
color: #000000;
}
.messageStackSuccess {
background-color: #ffffff;
color: #000000;
}
.messageStackCaution {
background-color: #ffffff;
color: #000000;
}
/*wrappers - page or section containers*/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 100%;
vertical-align: top;
}
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
.clearBoth {
clear:both;
height:0;
font-size: 1px;
line-height: 0;
}
}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#tagline {
color:#ffffff;
font-size: 2em;
text-align : center;
vertical-align: middle;
}
#sendSpendWrapper {
border: 0px solid #000000;
float: right;
margin: 0em 0em 1em 1em;
}
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}
.wrapperAttribsOptions {
margin: 0.0em 0em;
}
/*navigation*/
.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #7598ff;
color: #ffffff;
height: 10px;
}
#navCatTabsWrapper {
font-family: Vinque, arial, verdana, helvetica, sans-serif;
font-size: 1.9em;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1em;
}
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #000000;
white-space: nowrap;
}
#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000000;
}
#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1em;
}
#navEZPagesTOC ul li {
white-space: nowrap;
}
#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}
#navMainSearch {
float: right;
}
#navBreadCrumb {
background-color: #ffffff;
}
#navEZPagesTop {
background-color: #ffffff;
}
#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0em;
}
#navColumnOne {
background-color: #ffffff;;
}
#navColumnTwo {
background-color: #ffffff;
}
/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}
/*.content,*/ #productDescription, .shippingEstimatorWrapper {
/*font-size: 1.5em;*/
padding: 0.5em;
}
.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.1em;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 1.0em;
}
/*Shopping Cart Display*/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}
.tableHeading TH {
border-bottom: 0.5px solid #7598ff;
}
.tableHeading, #cartSubTotal {
background-color: #7598ff;
}
#cartSubTotal {
border-top: 0px solid #000000;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}
.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}
.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}
#scUpdateQuantity {
width: 2em;
}
.cartQuantity {
width: 4.7em;
}
.cartNewItem {
color: #33CC33;
position: relative; /*do not remove-fixes stupid IEbug*/
}
.cartOldItem {
color: #660099;
position: relative; /*do not remove-fixes stupid IEbug*/
}
.cartBoxTotal {
text-align: right;
font-weight: bold;
}
.cartRemoveItemDisplay {
width: 3.5em;
}
.cartAttribsList {
margin-left: 1em;
}
#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}
.orderHistList {
margin: 1em;
padding: 0.2em 0em;
}
#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}
#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}
#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}
.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}
.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}
.amount {
width: 5.5em;
}
/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}
.categoryIcon {}
#cartImage {
margin: 0.5em 1em;
}
/*Attributes*/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}
.attributesComments {}
/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}
.centerBoxContents,
background: url(http://www.oddsnsods.com.au/includes...ages/celt8.gif);
}
/*sideboxes*/
.columnLeft {}
h3.leftBoxHeading, h3.leftBoxHeading a {
font-size: 1.1em;
color: #000000;
}
.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: #7598ff;
padding: 0.5em 0.2em;
}
.leftBoxContainer {
border: 1px solid #3366ff;
margin-top: 1.5em;
}
.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.1em;
color: #000000;
}
.rightBoxHeading {
margin: 0em;
background-color: #7598ff;
padding: 0.2em 0em;
}
h3.leftBoxHeading a:hover {
color: #000000;
text-decoration: none;
}
.rightBoxContainer {
border: 1px solid #3366ff;
margin-top: 1.5em;
}
h3.rightBoxHeading a:hover {
color: #FF0000;
text-decoration: none;
}
.rightBoxContent {
background-color: #ffffff;
margin-bottom: 1.5em;
}
.leftBoxContainer, .rightBoxContainer {
margin: 0em
background-color: #ffffff;
margin-top: 2em;
}
#featuredProducts .centerBoxHeading{
line-height:28px;
color: #FFFF00;
background-color: #000066;
}
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}
#bestsellers .wrapper {
margin: 0em 0em 0em 0.3em;
}
#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}
#bestsellers li {
padding: 0;
margin: 0em 0em 0.3em 0em;
}
#bannerboxHeading {
background-color: #7598ff;
}
#upProductsHeading {
text-align: left;
}
#upDateHeading {
text-align: right;
}
/*misc*/
.back {
float: left;
}
.forward, #shoppingCartDefault #PPECbutton {
float: right;
}
.bold {
font-weight: bold;
}
.rowOdd {
background-color: #ffffff;
height: 1.5em;
vertical-align: top;
}
.rowEven {
background-color: #ffffff;
height: 1.5em;
vertical-align: top;
}
.hiddenField {
display: none;
}
.visibleField {
display: inline;
}
CAPTION {
/*display: none;*/
}
#myAccountGen li, #myAccountNotify li {
margin: 0;
}
.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/*vertical-align: top*/
}
.accountQuantityDisplay {
width: 10%;
vertical-align: top
}
TR.tableHeading {
background-color: #7598ff;
height: 2em;
}
#siteMapList {
width: 90%;
float: right;
}
.ratingRow {
margin: 1em 0em 1.5em 0em;
}
LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}
.information {padding: 10px 3px; line-height: 150%;}
#siteinfoLegal p {
margin-top: 0em;
margin-bottom: 0em;
padding: 0.1em;
}




My tpl_header.thp is:
<?php
/**
* Common Template - tpl_header.php
*
* this file can be copied to /templates/your_template_dir/pagename<br />
* example: to override the privacy page<br />
* make a directory /templates/my_template/privacy<br />
* copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
* to override the global settings and turn off the footer un-comment the following line:<br />
* <br />
* $flag_disable_header = true;<br />
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
*/
?>
<?php
// Display all header alerts via messageStack:
if ($messageStack->size('header') > 0) {
echo $messageStack->output('header');
}
if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
echo htmlspecialchars(urldecode($_GET['error_message']));
}
if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
echo htmlspecialchars($_GET['info_message']);
} else {
}
?>

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<ul class="back">
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
} else {
if (STORE_STATUS == '0') {
?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<div class="clearBoth" /></div>
<!--eof-navigation display-->
<!--bof-branding display-->
<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
<div id="taglineWrapper">
<?php
if (HEADER_SALES_TEXT != '') {
?>
<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
}
?>
<?php
if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
}
}
?>
</div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->
<!--eof-header logo and navigation display-->
<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->
<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
</div>
<?php } ?>


Thanks.

[barco57]

your tpl-header.php is fine. please find attached a copy of your stylesheet with fixes for the major errors. change .txt to .css on file extension

from there we can fix the little stuff

[raquelann]

Ok. Done...thankyou.
So, now the page is larger than it should be - that's OK - I am assuming that is easy to fix. The bottom section that was so bad is now all fixed also.
So..where to from here?

[barco57]

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 978px;
vertical-align: top;
}

[gjh42]

So this is why your site looked basically ok when I refreshed... it wasn't just a mis-load the first time. Glad you're getting it sorted!