"add to cart" overlaps with "Qty Discounts" in FireFox

[kaz]

I'm just getting started setting up my cart and have not tweaked any display code other than the sideboxes at this point. I noticed that the "add this to my cart" button overlaps the "Qty Discounts" box with narrow windows in FireFox (floats around properly in IE).

For example see the attached image or go to http://classygroundcovers.com/cart/i...&products_id=3 in FireFox and narrow your window so that the "Qty Discounts" box and the "add this to my cart" button cannot fit on one line.

Any ideas how to fix this?
(Would also like the two boxes to have their top edges aligned but I can probably figure that out later.)

Since my products are "Product - Free Shipping" I presume that tpl_product_free_shipping_info_display.php is the place that governs the display of this page. I find only one version of that in includes/templates/template_default/templates/tpl_product_free_shipping_info_display.php.
Here is a copy (although it has not been altered):

<?php
/**
* Page Template
*
* Loaded automatically by index.php?main_page=product_free_shipping_info.<br />
* Displays details of a "free-shipping" product (provided it is assigned to the product-free-shipping product type)
*
* @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_product_free_shipping_info_display.php 5369 2006-12-23 10:55:52Z drbyte $
*/
?>
<div class="centerColumn" id="productFreeShipdisplay">

<!--bof Form start-->
<?php echo zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($_GET['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product'), 'post', 'enctype="multipart/form-data"') . "\n"; ?>
<!--eof Form start-->

<?php if ($messageStack->size('product_info') > 0) echo $messageStack->output('product_info'); ?>

<!--bof Category Icon -->
<?php if ($module_show_categories != 0) {?>
<?php
/**
* display the category icons
*/
require($template->get_template_dir('/tpl_modules_category_icon_display.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_icon_display.php'); ?>
<?php } ?>
<!--eof Category Icon -->

<!--bof Prev/Next top position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 1 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
* display the product previous/next helper
*/
require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next top position-->

<!--bof Main Product Image -->
<?php
if (zen_not_null($products_image)) {
?>
<?php
/**
* display the main product image
*/
require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
}
?>
<!--eof Main Product Image-->

<!--bof Product Name-->
<h1 id="productName" class="freeShip"><?php echo $products_name; ?></h1>
<!--eof Product Name-->

<!--bof Product Price block -->
<h2 id="productPrices" class="freeShip">
<?php
// base price
if ($show_onetime_charges_description == 'true') {
$one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
} else {
$one_time = '';
}
echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?></h2>
<!--eof Product Price block -->

<!--bof free ship icon -->
<?php if(zen_get_product_is_always_free_shipping($products_id_current) && $flag_show_product_info_free_shipping) { ?>
<div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
<?php } ?>
<!--eof free ship icon -->

<!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="freeShip biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->
<br class="clearBoth" />

<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
// do nothing
} else {
?>
<?php
$display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
// hide the quantity box and default to 1
$the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
} else {
// show the quantity box
$the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
}
$display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
?>
<?php if ($display_qty != '' or $display_button != '') { ?>
<div id="cartAdd">
<?php
echo $display_qty;
echo $display_button;
?>
</div>
<?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

<!--bof Product details list -->
<?php if ( (($flag_show_product_info_model == 1 and $products_model != '') or ($flag_show_product_info_weight == 1 and $products_weight !=0) or ($flag_show_product_info_quantity == 1) or ($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name))) ) { ?>
<ul id="productDetailsList" class="floatingBox back">
<?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li>' . TEXT_PRODUCT_WEIGHT . $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_quantity == 1) ? '<li>' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?>
</ul>
<br class="clearBoth" />
<?php
}
?>
<!--eof Product details list -->

<!--bof Attributes Module -->
<?php
if ($pr_attr->fields['total'] > 0) {
?>
<?php
/**
* display the product atributes
*/
require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
}
?>
<!--eof Attributes Module -->

<!--bof Quantity Discounts table -->
<?php
if ($products_discount_type != 0) { ?>
<?php
/**
* display the products quantity discount
*/
require($template->get_template_dir('/tpl_modules_products_quantity_discounts.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_products_quantity_discounts.php'); ?>
<?php
}
?>
<!--eof Quantity Discounts table -->

<!--bof Additional Product Images -->
<?php
/**
* display the products additional images
*/
require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->

<!--bof Prev/Next bottom position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 2 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
* display the product previous/next helper
*/
require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next bottom position -->

<!--bof Tell a Friend button -->
<?php
if ($flag_show_product_info_tell_a_friend == 1) { ?>
<div id="productTellFriendLink" class="buttonRow forward"><?php echo ($flag_show_product_info_tell_a_friend == 1 ? '<a href="' . zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $_GET['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_TELLAFRIEND, BUTTON_TELLAFRIEND_ALT) . '</a>' : ''); ?></div>
<?php
}
?>
<!--eof Tell a Friend button -->

<!--bof Reviews button and count-->
<?php
if ($flag_show_product_info_reviews == 1) {
// if more than 0 reviews, then show reviews button; otherwise, show the "write review" button
if ($reviews->fields['count'] > 0 ) { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()) . '">' . zen_image_button(BUTTON_IMAGE_REVIEWS, BUTTON_REVIEWS_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p>
<?php } else { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<?php
}
}
?>
<!--eof Reviews button and count -->


<!--bof Product date added/available-->
<?php
if ($products_date_available > date('Y-m-d H:i:s')) {
if ($flag_show_product_info_date_available == 1) {
?>
<p id="productDateAvailable" class="freeShip centeredContent"><?php echo sprintf(TEXT_DATE_AVAILABLE, zen_date_long($products_date_available)); ?></p>
<?php
}
} else {
if ($flag_show_product_info_date_added == 1) {
?>
<p id="productDateAdded" class="freeShip centeredContent"><?php echo sprintf(TEXT_DATE_ADDED, zen_date_long($products_date_added)); ?></p>
<?php
} // $flag_show_product_info_date_added
}
?>
<!--eof Product date added/available -->

<!--bof Product URL -->
<?php
if (zen_not_null($products_url)) {
if ($flag_show_product_info_url == 1) {
?>
<p id="productInfoLink" class="freeShip centeredContent"><?php echo sprintf(TEXT_MORE_INFORMATION, zen_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($products_url), 'NONSSL', true, false)); ?></p>
<?php
} // $flag_show_product_info_url
}
?>
<!--eof Product URL -->

<!--bof also purchased products module-->
<?php require($template->get_template_dir('tpl_modules_also_purchased_products.php', DIR_WS_TEMPLATE, $current_page_base,'templates'). '/' . 'tpl_modules_also_purchased_products.php');?>
<!--eof also purchased products module-->

<!--bof Form close-->
</form>
<!--bof Form close-->
</div>

[kobra]

Try adding this to your stylesheet

#productQuantityDiscounts {
clear: both;
}

This is not going to assist with box top alignment but this is a realestate issue

[kaz]

Thanks for the reply!
Now they're on separate lines (it looks the same in IE and FF).
How to have them on the same line when the line is wide enough to fit them?

[kobra]

I noticed that the "add this to my cart" button overlaps the "Qty Discounts" box with narrow windows
How to have them on the same line when the line is wide enough to fit them?

It is the narrow windows and other resolutions that will mess this with a fluid layout - convert this to a fixed width and take out the other thing and see if the is closer to what you seek(change from 100% to 1000px or other width)

#mainWrapper {
	background-color: #EEFBEC;  /* light pastel green */
	text-align: left;
	width: 1000px;
	vertical-align: top;
	}

[kaz]

It is the narrow windows and other resolutions that will mess this with a fluid layout - convert this to a fixed width and take out the other thing and see if the is closer to what you seek(change from 100% to 1000px or other width)

It's important that I retain the fluid layout, as pages such as http://classygroundcovers.com/cart/i...=index&cPath=1 will display much better (once I figure out how to display a variable number of categories per line, of course).

[kobra]

It's important that I retain the fluid layout

I don't think so as have you looked at that page with the browser window reduced by half in size?

Try a fixed at 1000-1007 px (have to allow for the ladder bar at the right)

[kaz]

I don't think so as have you looked at that page with the browser window reduced by half in size?

I understand the current problems. I plan to change the display to float as many categories per line as will fit (instead of the four per line as it is presently). That way there will be ~3-8 categories per line and it will make better use of wide windows.