{literal}
<style type="text/css">
  div.img_frame {
    border: solid 1px #AAAAAA;
    background-color: #fff;
    width: 60px;
    height: 60px;
    /*height: auto;*/
    text-align: center;
    /*padding: 3px;*/
    margin: 0px 5px 0px 0px;
    float: left;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 3px;
    position: relative;
  }

  div.img_frame > img {
    max-width: 60px;
    max-height: 60px;
    margin: auto;
    vertical-align: middle;
  }

  #inline_name {
    position: absolute;
    width: 100%;
    margin-bottom: -0px;
    top: 50px;
    font-size: 9px;
    color: #fff;
    text-shadow: none;
    background-color: rgba(0, 0, 0, 0.5);
    padding-top: 2px;
  }

</style>
{/literal}
<div style="margin-top: -5px;">

  {foreach from=$bought_products item=product name=products}

  <div class="img_frame">

    <img src="{$product.products_image_src}">

    <p id="inline_name">
      <abbr title="{$product.products_name}">{$product.products_name_short}</abbr></p>
  </div>
  {/foreach}
</div>

<span class="ui-li-count">{$smarty.foreach.products.total}</span>