Attribute images going off the page & strange '4's

Hi everyone. Total newbie here on a very steep learning curve, first post.

I'm using v1.3.9f and Classic template.

I have done many searches but haven't found answers to a couple of things.

Please have a look at this page:
http://www.kodomo.com.au/index.php?main_page=product_info&cPath=1_7&products_id=14

1. I don't know why the attribute images are moving off the page or out of the column as it may be (my lingo is not up to scratch yet) and

2. On every product page that I have attribute images I have these strange '4's appearing at the end of the first row. The more images the more 4s there are. I'm just baffled and really need some help!

Thank you

I don't know why the attribute images are moving off the page
Looks fine in FireFox
What browser and version are you seeing this in?

On every product page that I have attribute images I have these strange '4's appearing at the end of the first row.
Yep I see those and the strange thing is "4's" are not in your view source???

Hi Kobra

Thanks for the quick response

I'm using Safari but when I look at the page in Firefox 3.6 (for Mac) I see the same issue.

Here's a screen dump (if I'm allowed to include images in the post)

The 4s are doing my head in!

The alignment problem seems to be here:

#cartAdd {
float: right;
width: 600px;
Height: 580px;
text-align: center;
margin: 1em;
border: 1px solid #ffffff;
padding: 1em;
}

I'm not sure why you specified a height for #cartAdd, but try removing it, and use margins and padding to move it around.

I can't see where the fours are coming from, either.

Wow, Stevesh, that was really easy, thank you!

As to why I had included height... I don't know, either, just novice behaviour, I don't even remember doing it :blush:

Still puzzled by the 4s, I've been trying to sort them out them for weeks now...

Still hoping someone might be able to shed some light on the mysterious '4's in my attribute image swatches, please?

Hi everyone - just putting this back out there to see if anyone can help with the 4s. They are on nearly every product page that has more than a few attribute images.
http://www.kodomo.com.au/index.php?main_page=product_info&cPath=1_7&products_id=14

Thanks

Switch to the Classic Template ... does it go away?

If so, do a comparison of a clean file for:
/includes/modules/attributes.php

to the one you are using on your server:
/includes/modules/your_template_dir/attribute.php

and see if you have a stray 4 in there ...

Thanks Ajeh. I tried switching template and they were still there. You've given me food for thought though. I am going to start (slowly) comparing files to find a stray 4.

The "4"s are at the beginning of lines in view source:```

gjh42 - thank you!

Below is what I found in the attributes.php. I've been through and just deleted the 4 from [$tmp_attributes_image_row = '4';] where ever I saw it. The 4s are gone (YAY!) but now my images are messy.
http://www.kodomo.com.au/index.php?main_page=product_info&cPath=1_7&products_id=14
I wasn't sure what to do really, code of any sort is new territory for me. Begging for just a little more help...

NJ

 // radio buttons
                  if ($products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_RADIO) {
                    if ($_SESSION['cart']->in_cart($prod_id)) {
                      if ($_SESSION['cart']->contents[$prod_id]['attributes'][$products_options_names->fields['products_options_id']] == $products_options->fields['products_options_values_id']) {
                        $selected_attribute = $_SESSION['cart']->contents[$prod_id]['attributes'][$products_options_names->fields['products_options_id']];
                      } else {
                        $selected_attribute = false;
                      }
                    } else {
                      //              $selected_attribute = ($products_options->fields['attributes_default']=='1' ? true : false);
                      // if an error, set to customer setting
                      if ($_POST['id'] !='') {
                        $selected_attribute= false;
                        reset($_POST['id']);
                        foreach ($_POST['id'] as $key => $value) {
                          if (($key == $products_options_names->fields['products_options_id'] and $value == $products_options->fields['products_options_values_id'])) {
                            // zen_get_products_name($_POST['products_id']) .
                            $selected_attribute = true;
                            break;
                          }
                        }
                      } else {
                        // select default but do NOT auto select single radio buttons
//                        $selected_attribute = ($products_options->fields['attributes_default']=='1' ? true : false);
                        // select default radio button or auto select single radio buttons
                        $selected_attribute = ($products_options->fields['attributes_default']=='1' ? true : ($products_options->RecordCount() == 1 ? true : false));
                      }
                    }

                    switch ($products_options_names->fields['products_options_images_style']) {
                      case '0':
                      $tmp_radio .= zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton zero" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . '</label><br />' . "\n";
                      break;
                      case '1':
                      $tmp_radio .= zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton one" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . ($products_options->fields['attributes_image'] != '' ? zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) . '  ' : '') . $products_options_details . '</label><br />' . "\n";
                      break;
                      case '2':
                      $tmp_radio .= zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton two" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . ($products_options->fields['attributes_image'] != '' ? '<br />' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) : '') . '</label><br />' . "\n";
                      break;
                      case '3':
                      $tmp_attributes_image_row++;
                      //                  if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= //'<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = '4';
                      }

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton three" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . $products_options_details_noname . '</label></div>' . "\n";
                      } else {
                        $tmp_attributes_image .= '<div class="attribImg">' . zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']',  $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<br />' . '<label class="attribsRadioButton threeA" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . $products_options_details_noname . '</label></div>' . "\n";
                      }
                      break;

                      case '4':
                      $tmp_attributes_image_row++;

                      //                  if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= //'<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = '4';
                      }

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsRadioButton four" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label><br />' . zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '</div>' . "\n";
                      } else {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsRadioButton fourA" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label><br />' . zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '</div>' . "\n";
                      }
                      break;

                      case '5':
                      $tmp_attributes_image_row++;

                      //                  if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= //'<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = '4';
                      }

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<br />' . '<label class="attribsRadioButton five" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label></div>';
                      } else {
                        $tmp_attributes_image .= '<div class="attribImg">' . zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<br />' . '<label class="attribsRadioButton fiveA" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label></div>';
                      }
                      break;
                    }
                  }

                  // checkboxes
                  if ($products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_CHECKBOX) {
                    $string = $products_options_names->fields['products_options_id'].'_chk'.$products_options->fields['products_options_values_id'];
                    if ($_SESSION['cart']->in_cart($prod_id)) {
                      if ($_SESSION['cart']->contents[$prod_id]['attributes'][$string] == $products_options->fields['products_options_values_id']) {
                        $selected_attribute = true;
                      } else {
                        $selected_attribute = false;
                      }
                    } else {
                      //              $selected_attribute = ($products_options->fields['attributes_default']=='1' ? true : false);
                      // if an error, set to customer setting
                      if ($_POST['id'] !='') {
                        $selected_attribute= false;
                        reset($_POST['id']);
                        foreach ($_POST['id'] as $key => $value) {
                          if (is_array($value)) {
                            foreach ($value as $kkey => $vvalue) {
                              if (($key == $products_options_names->fields['products_options_id'] and $vvalue == $products_options->fields['products_options_values_id'])) {
                                $selected_attribute = true;
                                break;
                              }
                            }
                          } else {
                            if (($key == $products_options_names->fields['products_options_id'] and $value == $products_options->fields['products_options_values_id'])) {
                              // zen_get_products_name($_POST['products_id']) .
                              $selected_attribute = true;
                              break;
                            }
                          }
                        }
                      } else {
                        $selected_attribute = ($products_options->fields['attributes_default']=='1' ? true : false);
                      }
                    }

                    /*
                    $tmp_checkbox .= zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details .'</label><br />';
                    */
                    switch ($products_options_names->fields['products_options_images_style']) {
                      case '0':
                      $tmp_checkbox .= zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . '</label><br />' . "\n";
                      break;
                      case '1':
                      $tmp_checkbox .= zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . ($products_options->fields['attributes_image'] != '' ? zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) . '  ' : '') . $products_options_details . '</label><br />' . "\n";
                      break;
                      case '2':
                      $tmp_checkbox .= zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . ($products_options->fields['attributes_image'] != '' ? '<br />' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) : '') . '</label><br />' . "\n";
                      break;

                      case '3':
                      $tmp_attributes_image_row++;

                      //                  if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= //'<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = '4';
                      }

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . $products_options_details_noname . '</label></div>' . "\n";
                      } else {
                        $tmp_attributes_image .= '<div class="attribImg">' . zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<br />' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . $products_options_details_noname . '</label></div>' . "\n";
                      }
                      break;

                      case '4':
                      $tmp_attributes_image_row++;

                      //                  if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= //'<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = '4';
                      }

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label><br />' . zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '</div>' . "\n";
                      } else {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label><br />' . zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']',$products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '</div>' . "\n";
                      }
                      break;

                      case '5':
                      $tmp_attributes_image_row++;

                      //                  if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= //'<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = '4';
                      }

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<br />' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label></div>' . "\n";
                      } else {
                        $tmp_attributes_image .= '<div class="attribImg">' . zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<br />' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label></div>' . "\n";
                      }
                      break;
                    }
                  }

Apologies, I needn't have pasted all that code. I've isolated the issue to just this:

 // collect attribute image if it exists and to be drawn in table below
                  if ($products_options_names->fields['products_options_images_style'] == '0' or ($products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_FILE or $products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_TEXT or $products_options_names->fields['products_options_type'] == '0') ) {
                    if ($products_options->fields['attributes_image'] != '') {
                      $tmp_attributes_image_row++;

                      //              if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= //'<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = '4';
                      }

Removing that 4 not only messed up my attribute images it stretched the graphic on my front page and everything looked so untidy that I have restored a backup. Hence, the link I sent to explain the messy images doesn't represent the new problem. I would appreciate anyone looking at the code from the attribute.php file and letting me know if they see anything odd. TIA

Download a fresh copy of ZenCart - your version

Replace the file with a clean one

Woo hoo, brilliant! All good now. I am so happy.

Many thanks kobra, gjh42, Ajeh and stevesh for helping me out. This newbie really appreciates it.