X-Cart forums

[sparrowdog]

http://www.carlaswimwear.com.au/shop/home.php?cat=1

You will see that some sub-category names wrap around 2 lines, and when they do, the images don't line up.

All the images are exactly the same size.

I have gone to the subcategories.tpl file and played with adding valign="top" to both of the <td> tags that hold the image and the text, but I cannot figure out how to actually get them to line up.

Any help would be greatly appreciated. Starting to tear my hair out

[balinor]

You've got bigger issues than that - look at the site in Firefox...

[sparrowdog]

Thanks for that. I will check that out.

Since the two are unrelated, is my original problem a simple fix? I've been unable to nut it out.

[balinor]

In order to keep the products all lined up, you need to keep the same heights for everything. To do that, you can use <div> tags with fixed height. So for the product name, you need to set the height to the maximum height needed for the longest product name you have (2 or 3 lines). Try different heights until you get it right.

[sparrowdog]

Thanks for that. I didn't think to set a fixed height for the product name. I will give that a go.

[JoeS]

Any luck with the above, I know it is over 5 years now, but it seems be me my turn now to find a solution to make the product title goes for 2 lines so my products look neet and lined up. I appreciate any help in which file do I need to amend and what code, thanks

[totaltec]

Joe , can you provide a link? It really helps to see an example of the issue at hand. I understand if you can't, but unless your template is stock it is going to be hard to help otherwise. Css is as Css does.

At least let us know what template you are using and the exact page you are talking about.

Here to help,

-Mike

[JoeS]

Hey Mike, many thanks for your help in advance, to see what I mean please visit the below link and see how all the products' photos are lined up. They have done it nicely where every product title goes 3 lines down regardless of how many words it contains, so for instance the first product on the top called "Seafolly Summer Stripe Catalogue Featured Bikini Set (Lapis)" is long 3 lines title, and the other two products on the same line have shorter titles but there is still an extra line added to make the photos lined up with the first product's photo:

http://www.carlaswimwear.com.au/shop/home.php?cat=120

It is a matter of making the title goes 3 lines regardless of how many words it has, I need to know how to do that please. Thanks again in advance.

[totaltec]

Just guessing here. I think the two properties that are affecting that title the most are
border-collapse: separate;
.producttitleheight {
height: 25px;
vertical-align: top;
}

But this page uses tables to achieve the results. Hopefully your page does not.

Like I said before, your page is going to be different based on your skin. CSS from someone elses page is not going to have the same effect on yours unless the structure and styles are exactly the same.

I am not saying that you can't find an example to use, that is the best way to learn css. All I am saying is that I can't really advise you without seeing your page. If I can have the page to see how it is currently rendering and why, then I can start leading you down the right path to a solution. Alternatively I could start writing a tutorial, but who has time for that?

Maybe someone else that has worked with your version a lot can post a code sample that will work with a default template. If you can't post your link publicly, send it in a PM
-Mike

[totaltec]

Okay after reviewing your link (sent via PM), your page is indeed laid out with tables like your example page. However, the table structure is not the same.

The example page has rows like this (hopefully this will translate)
-----------------------------------------------------------------------
| Product title | Product Title | Product Title |
-----------------------------------------------------------------------
| Product image | Product image | Product image |
-----------------------------------------------------------------------
| Product price | Product price | Product price |
-----------------------------------------------------------------------

Your template has rows like this:
-----------------------------------------------------------------------
| Product title | Product title | Product title |
Product Image Product Image Product Image
Product Price Product Price Product Price
-----------------------------------------------------------------------

Perhaps with some extremely clever css tricks you could get the behavior you want without changing the template, but it is the basic table structure that is keeping you from easily obtaining your desired result. (IMO)
Hope that helps,
-Mike