Product Name text overlapping price. How to fix? - magento

Question

HELLO KIND SIRS AND MADAMS,
http://www.statis-online.com For the homepage root catalog,
The product name overlaps the product price (When name is long).
-I would like to know how to make the product name and price not overlap!
(Step by Step Instructions Preferred. Not extremely code friendly)
Either through changing size of words?
or
Placement of price?
Other suggestions are welcome!
Thanks!

Answer 1

In the file style.css you have:
.products-grid .product-name a {
display: block;
color: #222;
height: 44px;
font-size: 13px;
font-weight: bold;
}
You need to remove the height property as the links are set to display as blocks, so the item wont get bigger than the set 44px height and it's overflowing to the next element.
This will fix the name issue, but will make the item boxes holding the products with different heights.
To fix this remove the set height for the price box and set height and position: relative for .item-bottom.
Then you can set the price box and and "add to cart" button to be positioned absolute and set them to be at the bottom of .item-bottom.
So you'll have:
.products-grid .item-bottom {
padding: 10px;
height: 155px;
background: url(../images/griditem-bottom.gif) repeat-x left top;
position: relative;
}
.products-grid .product-name a {
display: block;
color: #222;
/* height: 44px; */
font-size: 13px;
font-weight: bold;
}
.products-grid .price-box {
margin: 5px 0;
/* height: 58px; */
position: absolute;
bottom: 40px;
}
.products-grid .actions {
height: 26px;
position: absolute;
bottom: 10px;
}