Jump to content

[Resolved] Misalignment on checkout page


Recommended Posts

Checking through my site i found that there is an alignment problem on the checkout page with the "Empty basket box and text in the other boxes. please see pic, need a fix if there is one. I am using Mican theme

 

Link to comment
Share on other sites

Yes. This is because every browser is free to style the HTML elements however it wants. Because of this, someone graciously created a "normalize.css" file. This file is included in the Foundation skin /css/ folder. The normalize.css may fix the following:

On the checkout page, there are three buttons: Empty Basket, Update Basket, and Checkout». The Empty Basket is a URL link (an <a href> tag), while the other two are form <input> elements. And there is the difference: your browser's internal stylesheet places the form elements just slightly higher than the baseline of text -- the text of a link.

So, we can exchange the link to use a form element with form element styling -- the <button>.

In the Mican template content.checkout.php:

Near line 77:
	<div class="basket_actions">
	  <a href="{$STORE_URL}/index.php?_a=basket&empty-basket=true" class="button_default left">{$LANG.basket.basket_empty}</a>

Change to:
	<div class="basket_actions">
	  {* <a href="{$STORE_URL}/index.php?_a=basket&empty-basket=true"> *}
	  <button class="button_default left" onClick="window.location='{$STORE_URL}/index.php?_a=basket&empty-basket=true'; return false;">{$LANG.basket.basket_empty}</button>
	  {* </a> *}

The anchor link has been wrapped in template comments so as to remind you where it came from.

The button is made to perform an action that simulates clicking a URL link. Then false is returned so that the form it is a member of will not be submitted.

Be sure to test the action of emptying the cart.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...