Checkout Totals Don't Lineup

Hey Ted,

Try adding this

#order_review tr.shipping td span.amount {
    position: relative;
    left: -67px;

Looks like this is on line 233 in your byob-custom.css

You may need to fix this in responsive.

Hi,

Thanks for the code… Unfortunately – when I put this in, while it fixes the columns in the checkout – the columns on the cart page no longer line up.

Any suggestions for a fix to take care of both?

Thanks!

Ted

Hey Ted,

Sorry about that, that slipped my mind that it would change it in both places..

You can call in the page number to make sure this only happens on that page..

So add this on its own line and delete the position and left css from line 233…

.page-id-3056 #order_review tr.shipping td span.amount {
    position: relative;
    left: -67px;}

I hope that helps..

Ok… That works… But two quick follow ups…

I see that in IE – on the checkout page the column is not falling under the word TOTAL – like it does in Firefox and Chrome… Any idea why? Is there a fix? If not, no biggie.

Also, I notice that the horizontal line going across separating the subtotal and the shipping cuts off at the total in the checkout – but all other lines go all the way over. Again, any idea why? Is there a fix – if not again – no big deal.

I’m just glad the columns are lining up now!

Thanks for all your help!

Ted

Lets see if this works..

For IE fix try this first:

.page-id-3056 #order_review tr.shipping td span.amount {
    position: relative;
    right: 67px;
    zoom: 1;
    color: #000;
}

If that does not work try delete the other code and try this:

.page-id-3056 #order_review tr.shipping td span.amount {
     display: table;
    color: #000;
}

For the horizontal line we need to do two things.. One is make sure the color:#000 is added to the code above. And two on line 229 of our style sheet try this..

.cart_totals tr.shipping td, #order_review tr.shipping td {
    /* visibility: hidden; */
    color: #fff;
}

I hope that works for you..

Well… Neither of the first two codes fixed the problem in IE…

And the third piece of code made the shipping amount disappear (turning the font color white) on the Cart page, even though the line still doesn’t go across…

?? Any other ideas would be great!

Thanks!

Ted

Try being page specific again.

So for the checkout page:

Screen shots that may help for checkout page:
https://screencast.com/t/onSHdK0A
https://screencast.com/t/nSoPS5YRlkpQ

.page-id-3056 #order_review tr.shipping td {
/* visibility: hidden; */
color: #fff;
}

For the Cart page use the class .page-id-3055 to be specific

Screen shots that may help for checkout page:
https://screencast.com/t/1R2vicdJ
https://screencast.com/t/yuEAvZge2

I hope that helps

Checkout page:

I tried the updated code and got this:

https://tinyurl.com/z3rrhnq

Maybe it’s the way I am putting in the code – forgive my lack of knowledge here…

https://tinyurl.com/zg23h4h

What should I try next?

Thanks!

Ted

On line 240 or the last line of your style sheet add this and see if it works..

.page-id-3056 #order_review tr.shipping td {
     visibility:visible!important;
     color: #fff;
}

And on your cart page this is what you could add..

.page-id-3055 .cart_totals tr.shipping td {
visibility: visible;
color:#fff
}
.page-id-3055 .cart_totals tr.shipping td span.amount {
	visibility: visible;
	color:#000
}

You may need to add !important to make it work.. Let me know if that works..

We will get it eventually! ??

That works for the line across! ??

Two questions – (one we are already working on)…

IE still has the word TOTAL shifted over to the right on the Checkout page.

Also on the checkout page in all browsers, the shipping amount is one line down from the word Shipping. Any idea why – or a fix on that?

Thanks for all your help!

Ted

The reason the shipping amount is one line down is actually the cause of this whole issue.. Because the word “Table Rate:” was removed.. The issue is if you do visibility hidden to remove those words then the border above it does not show.. So instead we just made those words white so that they are hidden but you also get the border above..

Lets try this…

On line 245 add this:

.page-id-3056 #order_review tr.shipping td {
position: relative;
}

You can go back to this code on line 238 and change it to this:

.page-id-3056 #order_review tr.shipping td span.amount {
    color: #000;
    position: absolute;
    left: 12px;
}

That will fix your line issue and maybe your IE issue… Sorry I do not have IE so it is hard for me to trouble shoot it..

Hmmm…

Am I putting the code in wrong?

Current results:

https://www.screencast.com/t/NiYd44vqVLm
https://www.screencast.com/t/lDkKr2Zmuw

You may want to learn your way around the inspector. Right click the page, click ‘inspect element’. All HTML and CSS will be shown to you.

In your case, there just seems to be some different padding:

https://dl.dropboxusercontent.com/s/eiuh5au9hvkhkdb/2016-03-19%20at%2011.09.png?dl=0

.woocommerce table.shop_table td {
padding: 9px 12px !important;
}

Should clear that up.

You had it correct here https://www.screencast.com/t/NiYd44vqVLm

You just needed to remove display:table;

So add your code back like you had it in that screen shot and only remove display:table; and that should fix it.