Problem with product alignment in Chrome

[tonko81]

Hello guys!

 

I have a really annoying problem with my store. Look at picture.

 

This is happening only in Chrome and only in some categories. In IE and Firefox is everithing ok.

 

How do i put those items into 3 lines like they supposed to be?

 

Thanks for answers!

 

 

[yaniv14]

what is your site url?

[musicmaster]

I have the same problems. But they happen just on one of our computers. In our case with Internet Explorer.

[tonko81]

My url is http://goriladarila.si/

[yaniv14]

Look for:

 

ul#product_listing {

margin-top: 2em;

list-style-type: none;

}

I think its in theme/your_theme_name/css/product_list.css or global.css

and add: display: inline-block; so it will look like this:

 

ul#product_listing {

margin-top: 2em;

list-style-type: none;

display: inline-block;

}

also you can limit the height of the listing box so everything will be in the same height

Edited November 19, 2012 by yaniv14 (see edit history)

[tonko81]

Thanks for your answer but this isn't working. Is there another way?

 

How do I set limit of the hight of the listing box?

[yaniv14]

When I am checking with my chrome it's working fine, are you sure you add the display: inline-block; in the right place because I don't see it? also you need to change #productsSortForm P {height: 1em; margin: 0.5em 0 0 0;} to {height: 2.3em; margin: 0.5em 0 0 0;}

 

For the height its a bit tricky, because some times you have item that on sale and some are regular sale, so the items on sale will show the word (sale) and it will take additional line compare to no sale.

So you need to decide how you want it to work, also for the product name, some product name are short and catch 1 line and some products with long names take 2 lines.

To set the line height for the product name you need to add: height:30px; to ul#product_listing li h3.

this way all the products will have same product name height, but remember that product with shorter names will have an empty line under.

 

Just test it and see for you self what best for you.

[tonko81]

yaniv14 thank you so much for your help but it's still not working.

 

I had put display: inline-block; in the right place but then some disturbing dots have appeared. Look at the picture. So i have removed it.

 

I also try in combination with changing #productsSortForm P but those dots have appeared again.

 

Sometimes if I change position of some articles in group problem is solved but i dont have time to trying every possible position. I have just repair some most visited categories with this metod. You can see my problem here http://goriladarila....lo-za-obletnico

Edited November 20, 2012 by tonko81 (see edit history)

[yaniv14]

put back display:inline-block; so I can see the problem, right now I cannot see it with the link you sent

[yaniv14]

Also don't forget every time you make some changes you need to clear you browsing cache before you get the real picture of the newly edited css.

to clear you browser cache you press ctrl+f5 few times

[yaniv14]

Also make sure you have force compile turned on in your back office and cache turned off (when making changes to the templates).

also it will be easier for me to see your css files location without the cache.

[tonko81]

Everything done just like you said.

[yaniv14]

I see your problem, you need to make sure you close each line.

 

you have it like:

 

ul#product_listing {

margin-top: 2em;

list-style-type: none

display: inline-block;

}

 

and it need to be like:

 

ul#product_listing {

margin-top: 2em;

list-style-type: none;

display: inline-block;

}

[tonko81]

It's working! Thank you so much! You're the best