[MoonDog]

After a lot of searching, reading, printing, more reading, editing, etc. I finally figured out how to fix this 'bug'. Since I'm new at this I'm pretty sure I've done it correctly, since I don't have this problem anymore. But for any experts out there, please let me know if I did something incorrectly, cause I do believe in constructive criticism.

Anyway, the products page has a condensed description of the product that is limited to 300 characters and then it places the three dots ... at the end of the description. This only happens if the description is longer than three hundred characters. Now, when there are bullets in the description, and the description is longer than 300 characters, it never sees the closing </ul> at the end of the full description. So after the 300th character it still behaves as if though it still needs to be offset as if though it still has bullets.

So this is what I did:

Open the skin1/customer/main/products.tpl file

and find:

 
{$products[product].descr|truncate:300:"...":true}
<br />

and change <br /> to </ul>

So the code looks like this:

 
{$products[product].descr|truncate:300:"...":true}
</ul>

Save file, run and you can now see that the 'Buy Now' button lines up with all the other products 'Buy Now' buttons.

I still think this is a 'bug' with the software, because I had to actually had to change the code to make it work properly.

O.K., since this is the Storefront Design & Template Editing forum I've also made some minor changes to the look of the products page to make it more pleasing to the eye.

What I did was to remove the horizontal line underneath the partial description and placed the horizontal line between the different products.
I then added color to the line and changed the location of the three dots ... at the end of the condensed description to be placed at the end of a word instead of somewhere in the middle of a word.

First, find the (horizontal line under the description) code:

<hr class="PListLine" size="1" />

Cut that code and place it right after:

<table width="100%">

Now put <tr> before and </tr> after this code, so it should look like this:

 
<table width="100%">
<tr>
<hr class="PListLine" size="1" />
</tr>

The above code places the horizontal line between the different products.

Then find the code </table> and delete two <br /> after this code.

 
</table>
<br />
<br />

What the above code does when you delete the two <br /> is you place the horizontal line closer to the 'Buy Now' button.

Now, to make sure that the three dots does not get placed after 300 chararcters, in the middle of a word , but at the end of a word, we have to look for the same code we used at the top:

{$products[product].descr|truncate:300:"...":true}

and remove ':true' at the end, so it looks like this:

{$products[product].descr|truncate:300:"..."}

O.K., now let's give the horizontal bar a color.

Open up the file skin1/skin1.css, find HR.PListLine and add this code below:

COLOR: #FF9900 or whatever color you want to use.

So it should look like this:

 
HR.PListLine {
 WIDTH: 100%;
 HEIGHT: 1px;
 BORDER-BOTTOM-WIDTH: 0px;
 BORDER-LEFT-WIDTH: 0px;
 BORDER-RIGHT-WIDTH: 0px;
 COLOR: #FF9900
}

Hopefully, this will help somebody.

- MoonDog -