The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 11-02-2011, 03:10 PM
GreenSmoothiePower's Avatar
GreenSmoothiePower is offline
Junior Member
 
Join Date: Oct 2011
Posts: 7
Default

"My Billing Address is the Same as Shipping" Problem- Not Aligned


Hello!

I am trying the align the background color on the checkout page where it says "My Billing Address is the Same as Shipping". The background button is not aligned with the text. Can you please help? The screenshot is attached.

I tried adding this CSS as per other posts but did not work:

.box-left .ecwid img {
float:none !important;
}

div.post div.ecwid table td {
background:none;
}

  #2  
Old 11-02-2011, 03:38 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

This is caused by the style of your own website. The rule on the line 2001 of the file http://greensmoothiepower.com/greens...anic/style.css which reads as:
Code:
td {
color: #333;
font-family: VegurLight, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: center;
line-height: 50px;
}
sets the line height equal to 50 pixels to any <TD> element (representing table cells) in your site (including those inside Ecwid).

Then there are 2 more: one inside the rule at line 1985, anothe in the rule at line 2020, which do the same and also affect this button.

This causes the element in question to look improperly.

Line-height property in CSS usually means 'how much space is there vertically between the baselines in 2 lines of text in this element'; for elements with just 1 line of text it acts somewhat similar to height property.

It doesn't make much sense to set that big line-height, not even corresponding with the text size, to each and every table cell in your site. Its is most correct to remove that declaration from the said 3 locations; if this line height is important for some particular elements in the design of your website, the selectors should be changed to target those elements more precisely.

Since you change the CSS of your site, so that it does not set that huge line-height to all <td> elements in your site, the display of that button will be fixed.
  #3  
Old 11-02-2011, 06:45 PM
GreenSmoothiePower's Avatar
GreenSmoothiePower GreenSmoothiePower is offline
Junior Member
 
Join Date: Oct 2011
Posts: 7
Default

Thank you for your explanation! I'm not sure that I want to change the line height since it's a pre-designed template and this setting may be needed elsewhere for some reason. If I want to make a new CSS for the td of that ecwid field to over-ride the td of the site, what would the CSS look like? I tried to use ecwid-PseudoButton-left td but it did not seem to work.
  #4  
Old 11-04-2011, 01:45 PM
GreenSmoothiePower's Avatar
GreenSmoothiePower GreenSmoothiePower is offline
Junior Member
 
Join Date: Oct 2011
Posts: 7
Default

I tried to change the site css as per the suggestion above, taking out all large line heights and there was no difference in the ecwid issue. I also tried many variations of changing ecwid CSS but also no change. So, in the end I deleted the background button and changed the text to grey. This seems to have mis-aligned my shipping option somehow, but for lack of any other support, it's the best I could do. Here is the code in case anyone else finds the same problem:

td.ecwid-PseudoButton-left {
background:none;
}

td.ecwid-PseudoButton-center {
background: none;
}

td.ecwid-PseudoButton-right {
background:none;
}

.ecwid div.gwt-Label {
color: #666666;
}
  #5  
Old 11-07-2011, 10:17 AM
Matt Ecwid's Avatar
Matt Ecwid Matt Ecwid is offline
Ecwid Team
 
Join Date: Oct 2011
Posts: 4,947
Default

Quote:
Originally Posted by GreenSmoothiePower View Post
I tried to change the site css as per the suggestion above, taking out all large line heights and there was no difference in the ecwid issue. I also tried many variations of changing ecwid CSS but also no change. So, in the end I deleted the background button and changed the text to grey. This seems to have mis-aligned my shipping option somehow, but for lack of any other support, it's the best I could do. Here is the code in case anyone else finds the same problem:

td.ecwid-PseudoButton-left {
background:none;
}

td.ecwid-PseudoButton-center {
background: none;
}

td.ecwid-PseudoButton-right {
background:none;
}

.ecwid div.gwt-Label {
color: #666666;
}
Thank you for sharing your solution. It may be useful for those Ecwid users who want to clean a background of the 'My Billing Address is the Same as Shipping' button. However, in your case it doesn't fix the basic issue, which is connected with the button height.

As Eugene said in his message in this thread, the issue was caused by the CSS styles of your site. I have checked it just now and it still contains rules which break the button layout (I mean the 'line-height' property for 'td' elements). I am pretty sure that if you delete 'line-height' property re-definitions from your styles according to Eugene's instructions, the issue will be fixed. (Note: you should clean your browser cache after changing CSS styles on your site).

If, however, you decide to fix the issue with the help of your Ecwid custom CSS theme only, apply the following code to it:
Code:
div.ecwid-AddressForm table.ecwid-PseudoButton, 
div.ecwid-AddressForm table.ecwid-PseudoButton tr, 
div.ecwid-AddressForm table.ecwid-PseudoButton td {
  line-height: normal !important;
}
The code above will re-define the 'line-height' property for the button and will not change anything in the rest of your site.
__________________
Matt K
Ecwid Team

Ecwid Guide for Beginners

Ecwid Help Center

Ecwid video tutorials
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
background, billing address, checkout, not aligned, same as shipping

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:11 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.