Attribute Alignment in Product Listing

[gjh42]

Good to know that that tweak makes it work correctly!
What I actually had in mind was giving .wrapperAttribsOptions a height of 2.5em or so, so that h4.optionName wouldn't need the margin to keep space below it; but it seems that IE simply needed a dimension specified in order to use the positioning.

[Tig]

I have another question along the same lines:

If you look at the product page the buttons at the bottom (Add to cart, review, etc) are arranged in a left-handed L. I've been dinking around with some of the files and I can't figure out how to get them to go straight down the page. I'm redoing the buttons (and I'll probalby have a question on that too, but I'll get to it when I get stumped) and I want them to align vertically instead of in that backwards L.

How do I do that?

Thanks again!

[Tig]

Update: I've got them in a vertical line, but for some if I declare a margin for IE it makes Firefox / Mozilla look out of line but if I make it look good in firefox it gets all funked in IE.

That and there seems to be more space between 'tell a friend' and 'write a review' than between 'tell a friend' and 'add to cart'

I don't want to disable those two features on the product page but I can't think of how to unstick the situation. Here is the relevant tpl_product_info_display.php file:

<!--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 align="right" 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 Tell a Friend button -->
<div align="right">
<?php
  if ($flag_show_product_info_tell_a_friend == 1) { ?>
<div id="productTellFriendLink" class="buttonRow back"><?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
  }
?>
</div>
<!--eof Tell a Friend button -->
<br class="clearBoth" />
<!--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>
<?php
  }
}
?>
<!--eof Reviews button and count -->

And the relevant css:

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	margin: 0.5em;
	}

#cartAdd {
	text-align: right;
	margin-right: 1em;
	/* border: 1px solid #000000; */
	/*padding: 1em;*/
	}

[Danielle]

I have this working beautifully in Firefox, but it looks terrible in IE, everything is crammed together. This is the CSS:

.wrapperAttribsOptions {position: relative; height: 5px;}
h4.optionName {
float: left;
margin-bottom: 1em;
}

.wrapperAttribsOptions select, .wrapperAttribsOptions input {
position: absolute;
top: 2.3em;
left: 0.3em;
}

Here's an example of how it looks: http://www.bellaraine.com/ballerinap...dbook-p-4.html

I've tried changing various things in the CSS but I can't figure out how to fix the spacing in IE. Can anyone help?

Thank you!

[gjh42]

I'm not sure what could be causing the problem you see - when I looked in IE6, the attributes actually appeared a bit more spaced out than in FF.

[Danielle]

Well that is bizarre. I am using IE7 though, so maybe that is why. I've attached a screenshot of what I'm seeing. It was actually someone else who told me about it, she is probably on IE7 as well.

[gjh42]

Yep, that's not good. Unfortunately there's nothing more I can say about it.