Wide gap between attribute drop downs.

[sports guy]

I have a wide gap between my attribute drop downs. I want to close this gap. Please see example here: http://www.collars2switch.com/animal...with-paws-p-13

Located in between the two attribute drop downs of: Collar Swatch Size and Swatch Width

How can I close this gap? Which file would I edit? It is big right now like a gaping hole and I want them one on top of the other if possible.

[stiggy100]

I too had this exact problem and only ever managed a workaround, my solution was to add:

#productAttributes {
margin:40px 0 0 -15px;
width:370px;
}

playing around with the margin helped - but as I say it was a workaround that worked for me - I have no idea if it will work for you. I'd be interested to hear to correct way to fix this though...

[sports guy]

Well I can see my source code (on the front end of the website). That area says:

<!--bof Attributes Module -->

You can see a gaping hole in the source code:

<!--bof Attributes Module -->
<div id="productAttributes">
<h3 id="attribsOptionsText">Please Choose: </h3>
 
 
<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-4">Collar Swatch Size</label></h4>
<div class="back">
<select name="id[4]" id="attrib-4">
  <option value="5">Please select ...</option>
  <option value="4">X-Small (14&quot;)</option>
  <option value="6">Small (16&quot;)</option>
  <option value="7">Medium (20&quot;) ( +$1.00 )</option>
  <option value="8">Large (24&quot;) ( +$1.00 )</option>
</select>
 
</div>
<br class="clearBoth" />
</div>
 
 
 
 
 
<br class="clearBoth" />
 
<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-5">Swatch Width</label></h4>
<div class="back">
<select name="id[5]" id="attrib-5">
  <option value="11">Please select ...</option>
  <option value="9">5/8&quot; Wide</option>
  <option value="10">7/8&quot; Wide</option>
  <option value="12">Please select for me!</option>
</select>
 
</div>
<br class="clearBoth" />
</div>
 
 
 
 
 
<br class="clearBoth" />
 
 
 
 
</div><!--eof Attributes Module -->

If I were to deal with the core (which I suspect might be the problem) what file would one modify? The Attributes Module? If so, where would this file be able to be modified from?

If I recall on my last two installations (yes I have installed several zen carts so far) that there was a module in which I did an easy checkout. I had to modify the view product page and this might have been in that area. Am I right?

Just wondering, I want to take out extra dead space if Zen cart or a module contributor is adding it in. As of right now that gaping hole is not going to work.

Stiggy, I have yet to apply your recommendation. But if what I am trying to do does not work, I very well may apply that patch to override the dead space. I do thank you for your recommendation (as I am not that good with margins).

[sports guy]

Anybody? Would this be the: tpl_product_info_display.php page in the: includes>templates>template_default>templates?

I am looking for the product information page. It looks like my add to cart image is the problem. I want to move it lower!

[sports guy]

I too had this exact problem and only ever managed a workaround, my solution was to add:

#productAttributes {
margin:40px 0 0 -15px;
width:370px;
}

playing around with the margin helped - but as I say it was a workaround that worked for me - I have no idea if it will work for you. I'd be interested to hear to correct way to fix this though...

Got it. The code you provided did work, but my add to cart button was above the attributes which I thought was a problem (since my visitors are forced to add attributes and then add it to the cart). So it makes sense to move the add to cart button lower and it fixed the problem. Here is the solution that worked for me:

Find and Open: includes>templates>template_default>templates>tpl_product_info_display.php file.

Find this code around Line #88:

<!--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-->

Move that code to after this tag (around line #142)

<!--eof Attributes Module -->

Save the file to: includes>templates>YOUR TEMPLATE>templates to override the core file.

Whalaaa! The add to cart image that was causing the issue was moved below the attributes. The attributes now diaplay the way the should display (in order).

[sports guy]

A simpler solution is in your css stylesheet around line: 334 for 1.3.9 default template. (Depending on your stylesheet).

Look for this code:
[code]/*Shopping Cart Display*/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}[code]

You can change the float to: float:inherit and/or also change the margin to: 3.em; If you choose inherit it will center the image and fix the skewed attribute text. Either way this is the add to cart area of the css that needed changed for this page.

[first trading]

I have a wide gap between my attribute drop downs. I want to close this gap. Please see example here: http://www.collars2switch.com/animal...with-paws-p-13

Located in between the two attribute drop downs of: Collar Swatch Size and Swatch Width

How can I close this gap? Which file would I edit? It is big right now like a gaping hole and I want them one on top of the other if possible.

Look for:

.wrapperAttribsOptions

In the stylesheet, and if it is not there put it in with something like this:

.wrapperAttribsOptions {
margin:0em;
padding:0px;
}

Adjust accordingly.