Shipping/Delivery buttons don't align

I'm experiencing an issue with the Payment/Shipping selection buttons not aligning with their descriptions in the checkout page. I've added the following code but the issue is not being corrected:

#hikashop_checkout_page .hikashop_shipping_methods td {
vertical-align: top !important;
}

Screencap: screencast.com/t/v9YAh4bCxoh

How can i fix this?

-- url of the page with the problem -- : rawgourmet.ca/index.php/component/hikash...ep/step-1?Itemid=192
-- HikaShop version -- : 2.2.3
-- Joomla version -- : 2.5.16
-- Browser(s) name and version -- : Safari

Hi,

I do not see your css rule, which is right.

Regards,

Hi Jerome,

Thank you for your response. I'm not clear on how to correct the issue. The buttons do not align with the descriptions as can be seen in the following screen capture:

screencast.com/t/hKuUr7DS

Can you please offer some additional instruction on how to correct this?

Thank you for your help with this.

Hi,
Using this kind of CSS code will probably do the job :

Thank you for the super fast response Mohamed.

This code helped a little bit, but the buttons for Shipping and Payment are still not aligning completely. They are still offset as seen in the following screen cap:

screencast.com/t/eFTb4oQpWv0

I suspect the buttons are in a lower row of the table and the code needs to be further adjusted somehow.

Can you offer some additional help to resolve this?

You can do like that:
.hikashop_shipping_methods label, .hikashop_payment_methods label{ margin-top : 15px !important; }

Thanks Nicolas - That did the trick 99%. I tweaked the code a little to isolate the Payment and Shipping styles.

Here is the code in place now:


.hikashop_checkout_shipping_radio { margin-bottom: 20px !important; }
.hikashop_shipping_methods label { margin-top: 8px !important; margin-bottom: 0px !important; padding-top:0px; padding-bottom:0px; }
.hikashop_payment_methods label { margin-top: 8px !important; margin-bottom: 0px !important; padding-top:0px; padding-bottom:0px;}

Now the only remaining issue is there is a large space between the Shipping options. The Payment options spacing is fine. Here is a screen cap of what is happening:

screencast.com/t/pg2PDPXtxIW

Hi,

You have probably to apply the first property on the class "hikashop_shipping_group" and not "hikashop_checkout_shipping_radio".

Have you read that tutorial:
hikashop.com/support/153.html

Hi Xavier,

I've have read the tutorials and i'm quite knowledgable with css/html. This is the 5th Hikashop cart i have setup. The issue is my PHP skills are not very good and i cannot find the code to adjust the Shipping table which appears to be the issue. It would make sense that the layout and css would be the same for both the Shipping and Payment tables but this appears to not be the case.

The code Mohamed suggested be inserted originally ["hikashop_shipping_group" and not "hikashop_checkout_shipping_radio"] to attempt to correct the issue has now been removed and the formatting now appears as it did originally...

Screencap: screencast.com/t/urQ6dCsy

It looks like there are 2 table rows for the Payment table and the description is on the top row and button on the bottom row which is why they don't align. Any additional help to resolve this is appreciated.

Hi,

I don't see the problem here then. It's just simple CSS that you can use to fix that:
.hikashop_shipping_group br{ display:none; }

Perfect. That code did the trick. Everything is in alignment now. Thank you for all your help.