X-Cart forums

[gb2world]

There are heights being set in a couple of divs around your image - all those need to be cleared. If you remove those height settings, and your description still moves up over the image - set clear:both in the description's div.

[h_griego]

Thanks! When I look at it in Firebug.. I can see the image and image box divs are set with a width and height.. when I remove these in Firebug and add the clear: both it all seems to line up okay. But when I look into the product.tpl file I know where the height setting is for the image div since we added that there but for the image box div I am not seeing where the height setting is at to remove it. This is the code that is for the image box div in the product.tpl file...

<div class="image-box" style="{if $max_image_width gt 0}width: {math equation="x+14" x=$max_image_width}px;{/if}">
            {include file="product_thumbnail.tpl" productid=$product.image_id image_x=$product.image_x image_y=$product.image_y product=$product.product|escape tmbn_url=$product.image_url id="product_thumbnail" type=$product.image_type}
          </div>

I have looked around everywhere but I am not seeing where the height setting is for the image box div.

[gb2world]

You can use webmaster mode to find the template where the image-box div is set. In this case, when you hover over the template names in webmaster mode, I suspect it will point you to the modules/Detailed_Product_Images/popup_image.tpl
If so - delete or comment out the height setting. You do have to execute care when doing this. If all your detailed images are the same height or less than the product thumb, you should be okay. If any are taller - you need to modify the css to allow for the height when you use the mouse-over of the detailed image thumbs. That is why QT coded this height into the template.

[h_griego]

Thank you! This seems to have worked! We appreciate your help in this!

[gb2world]

You are welcome.

One more thing I noticed on your site - the method you are using for the background image can become problematic when the browser window is narrow. If you make the browser narrower than how you normally view it - you can see that the divs inside your page-container can be outside of the white space you are using to define the center area in your background image.

One possible solution you can try and see if it still meets the requirements of your design is to set the background-color of #page-container to #ffffff.