Shopping Cart tables not lining up

  • Posts: 3
  • Thank you received: 0
12 years 10 months ago #41691

You can see the website in question here: http://www.skillbuildersbooks.com

If you add items to the cart and view it, you will see that the items inside cells in the table are not lining up as they should. The header rows are centered, as are the images and product titles, but the Unit Price, Quantity, and Total Price are not.

I have tried applying text-align:center to td, tr, and also the specific row and cell classes used by Hikashop, but I cannot seem to alter the alignment of those three items in any way. It looks pretty terrible the way it is, so I would really love to fix it.

Also, another unrelated (but also style-related) issue: I am getting a different spacing above the description on product pages in one category versus another. This page illustrates the spacing I would like, and this page illustrates the extra spacing above the description that I am trying to get rid of.

I appreciate any help I can get.

Last edit: 12 years 10 months ago by ianmarquis.

Please Log in or Create an account to join the conversation.

  • Posts: 83103
  • Thank you received: 13416
  • MODERATOR
12 years 10 months ago #41865

You need to remove the code:
#hikashop_checkout_page .hikashop_product_price_full {
text-align: left;
}
from the CSS file of HikaShop.

For the quantity elements, it's the CSS:
.hikashop_cart_product_quantity_value .hikashop_product_quantity_field, .hikashop_cart_product_quantity_value .hikashop_cart_product_quantity_refresh, .hikashop_cart_product_quantity_value .hikashop_cart_product_quantity_delete {
float: left;
}
.hikashop_cart_product_quantity_delete, .hikashop_cart_product_quantity_refresh, .hikashop_product_quantity_field {
float: left;
}

However, if you remove it, each elements of the quantity area will be one on top of the other.


Regarding your description text the problem comes from the way you did it.
You set a negative margin-top on hikashop_product_bottom_part. However, your images are not the same size so the margin has to be different between each product to compensate for the difference.

You could do that for example:
#hikashop_product_B1_page .hikashop_product_bottom_part{
margin-top: -375px !important;
}

The following user(s) said Thank You: ianmarquis

Please Log in or Create an account to join the conversation.

  • Posts: 3
  • Thank you received: 0
12 years 10 months ago #41972

Thank you, Nicholas. I kept the floats and added a text-align:left; to each of those, which fixed everything but the quantity field. I can probably live with that one not lining up, but I am not sure why it wouldn't obey the style sheet (unless there's something else in play). Regarding the top space on the product pages, I see what you mean. I had cribbed your layout adjustment styles from another thread where you answered a similar question, and the fix only worked for images that were all the same size. I shortened the taller ones as a quick fix, and it works now. Again, many thanks.

Please Log in or Create an account to join the conversation.

Time to create page: 0.059 seconds
Powered by Kunena Forum