[SOLVED] Category Display Problem w/J3.0.2

Good Morning,

It has been some time since I started a new Hikashop project, so thought I'd give version 2.0.0 (Basic) a whirl with Joomla 3.0.2 and have hit a snag.

I'm trying to display "Brands" in a div format, but they are not lining up correctly. (see sample). I thought it was probably a template issue so switched to the default Joomla 3.0 template (Protostar) and see the same problem. The first row of items are out of alignment with the rest, and if I set 3 columns, three display in first row, but there is not enough space to display three on subsequent rows because those rows are shifted right a few pixels. If I change to two columns, two display on row one and only one in each subsequent row.

Another problem seems to be that sort order is ignored in Firefox, but works in IE. I cleared cache, etc, but still can't get the display sorted in FF. This might still be a cache problem that will eventually clear up, but so far, it hasn't, no matter how many times everything is cleared.




Regards,
Ed

One thing it may be, the size of your images, some are 1 pixel larger (the boxes)

Sorry i have to go, but that may be the problem?

Thanks for the response.

I have tried various image width/height settings in Parameters for DIV section. Setting image width all the way down to 100px doesn't change anything, other than the images are much smaller. The div box width adjusts automatically, based on the number of columns specified in the Menu Details section and no matter what settings are used, the result is the same; that is, row one has the specified number of columns, and following rows are offset just a bit to the right and are missing the last column. In fact, I have just changed the number of columns to 4 and reduced image width to 100px. You can see the result at the link provided in the original post.

Thanks for the suggestion,
Ed

It seems that the Bootstrap template override our css file.

Try to add a property in your "template.css" file to remove the margin-left on the classes "hikashop_category_column_5" "hikashop_category_column_9" "hikashop_category_column_13" ...
Like:

.hikashop_category_column_5, .hikashop_category_column_9, .hikashop_category_column_13{
margin-left: 0px !important;
}

Thanks for the suggestion Xavier.

That works for that particular layout, but breaks again if number of columns or number of displayed rows are changed. I could add that property for EVERY column, eliminating all spacing between categories, but if someone decided to show all categories on one page, the property would need to be defined for every possible number of categories.

So your solution demonstrates where the problem lies, but is not a permanent fix.

Regards,
Ed

Thanks Nicolas!

That does seem to have fixed this issue.

Regards,
Ed