[Помогите] Текст вышел за пределы корзины

Текст вышел за пределы блока модуля мини-корзины
Вот весь код template.tpl

Код:

<?php
/**
 * @author Harpreet Singh Sahota
 * @copyright http://goo.gl/xt8Qd 
 */
?>

<div id="dynamicminicart" class="box">
  <div class="box-heading">
      <?php echo $heading_title; ?>
  </div>
  <div class="box-content">
    <a><div id="cart-total"><?php echo $text_items; ?></div></a>
    <?php if ($products || $vouchers) { ?>
    <div class="mini-cart-info">
      <table>
        <?php foreach ($products as $product) { ?>
        <tr>
          <td class="image"><?php if ($product['thumb']) { ?>
            <a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" /></a>
            <?php } ?></td>
          <td class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
            <div>
              <?php foreach ($product['option'] as $option) { ?>
              - <small><?php echo $option['name']; ?> <?php echo $option['value']; ?></small><br />
              <?php } ?>
            </div></td>
          <td class="quantity">x&nbsp;<?php echo $product['quantity']; ?></td>
          <td class="total"><?php echo $product['total']; ?></td>
          <td class="remove"><img src="catalog/view/theme/default/image/remove-small.png" alt="<?php echo $button_remove; ?>" title="<?php echo $button_remove; ?>" onclick="$('#dynamicminicart').load('index.php?route=module/minicart&remove=<?php echo $product['key']; ?> #dynamicminicart > *');" /></td>
        </tr>
        <?php } ?>
        <?php foreach ($vouchers as $voucher) { ?>
        <tr>
          <td class="image"></td>
          <td class="name"><?php echo $voucher['description']; ?></td>
          <td class="quantity">x&nbsp;1</td>
          <td class="total"><?php echo $voucher['amount']; ?></td>
          <td class="remove"><img src="catalog/view/theme/default/image/remove-small.png" alt="<?php echo $button_remove; ?>" title="<?php echo $button_remove; ?>" onclick="$('#dynamicminicart').load('index.php?route=module/minicart&remove=<?php echo $voucher['key']; ?> #dynamicminicart > *');" /></td>
        </tr>
        <?php } ?>
      </table>
    </div>
    <div class="mini-cart-total">
      <table>
        <?php foreach ($totals as $total) { ?>
        <tr>
          <td align="right"><b><?php echo $total['title']; ?>:</b></td>
          <td align="right"><?php echo $total['text']; ?></td>
        </tr>
        <?php } ?>
      </table>
    </div>
    <div class="checkout"><a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a> | <a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>
    <?php } else { ?>
    <div class="empty"><?php echo $text_empty; ?></div>
    <?php } ?>
  </div>
</div>

 

Правьте стили (.css). Вот все, что можно сказать, исходя из данной Вами информации.
Стили для класса mini-cart-info или для id dynamicminicart

 

Код:

}
.mini-cart-info table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 5px;

}
.mini-cart-info td {
    color: #000;
    vertical-align: top;
    padding: 10px 5px;
    border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
    width: 1px;
}
.mini-cart-info .image img {
    border: 1px solid #EEEEEE;
    text-align: left;
}
.mini-cart-info .name small {
    color: #666;
}
.mini-cart-info .quantity {
    text-align: left;
}
.mini-cart-info td.total {
    text-align: left;

}
.mini-cart-info .remove {
    text-align: left;

}
.mini-cart-info .remove img {
    cursor: pointer;
}
.mini-cart-total {
    text-align: left;

}
.mini-cart-total table {
    border-collapse: collapse;
    display: inline-block;
    margin-bottom: 5px;
word-wrap: break-word;
}
.mini-cart-total td {
    color: #000;
    padding: 4px;
}
 

 

Внёс изменения , но до ума довести не получилось ...(

Код:

.mini-cart-info table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 5px;

}
.mini-cart-info td {
    color: #000;
    vertical-align: top;
    padding: 10px 0px;
    border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
    width: 1px;
}
.mini-cart-info .image img {
    border: 1px solid #EEEEEE;
    text-align: right;
}
.mini-cart-info .name small {
    color: #666;
}
.mini-cart-info .quantity {
    text-align: right;
}
.mini-cart-info td.total {
    text-align: right;

}
.mini-cart-info .remove {
    text-align: right;

}
.mini-cart-info .remove img {
    cursor: pointer;
}
.mini-cart-total {
    text-align: right;

}
.mini-cart-total table {
    border-collapse: collapse;
    display: inline-block;
    margin-bottom: 5px;
word-wrap: break-word;
}
.mini-cart-total td {
    color: #000;
    padding: 4px;
}

 

Ну дела... А почему нельзя сделать весь блок корзины пошире и шрифт поменьше?

 

Потому что Основной контейнер тогда будет кривым