The style below causes the right border to disappear. Removing width:100%; solves this bug. I believe the reason is 100% + 2 x 1px is more than 100% and therefore it becomes invisible. Tested with Firefox 3.5.

#cart-form-products {
  border:1px solid #BBBBBB;
  margin-top:0.5em;
  width:100%;
}

#cart-form-buttons {
  border:1px solid #BBBBBB;
  margin:0.5em 0;
  text-align:right;
  width:100%;
}

#checkout-form-bottom {
  border:1px solid #BBBBBB;
  text-align:right;
  width:100%;
}

This happens at least on "cart" and "cart/checkout".

Proposed solution: remove the width.

Comments

hass’s picture

Or may use width: auto;

Island Usurper’s picture

I see the border-right just fine in Firefox 3.5.3, using Garland. There is a similar issue in Chrome on the table.cart-review on the checkout page, but changing the width didn't help it at all.

hass’s picture

I've changed it to "auto" and now it works for me and I believe all other themes, too. 100% is for sure wrong as it's more than 100% with addition of the borders width. You can only see this issue if you have overflow: hidden to keep the layout intact and stop overlapping content with left/right columns. I'm using the YAML Themes, but we only need to search for more themes to see this. I have not tested Garland, but as I know it does not hide overlapping content and this is why it may not *visible* in Garland. You may be able to see the overflow bug more visually if you give the border 20px or 100px... :-)

hass’s picture

This table.cart-review could be the same type of calculation bug... if the table have 100% and you have borders than you have the same issue. Try "auto" for the table width and the issue should be solved, too. Not verified myself...

jmuessig’s picture

The issue with the right border disappearing in IE / Chrome is apparently corrected by changing:

table {border-collapse: collapse;}

to

table {border-collapse: separate;}

Obviously this is not a good solution as the tables become distinct.

Hopefully it leads towards a good solution for someone more knowledgeable in CSS than I.

hass’s picture

Solution is in #1

jmuessig’s picture

I am actually using Ubercart v.2.2. The solution I found involves update the colspan value for the subtotal in uc_cart_checkout_pane.inc here: http://drupal.org/node/649352.

TR’s picture

Issue tags:+Ubercart theme layer

Tagging

longwave’s picture

The effect of this is actually noticeable in Garland immediately after adding or updating a product in the cart. The right hand border of the cart table and buttons block does not line up with the right hand border of the messages block immediately above it. Removing width: 100% seems to fix it.

longwave’s picture

Status:Active» Fixed

Suggested fix from #0 committed to both branches.

Status:Fixed» Closed (fixed)
Issue tags:-Ubercart theme layer

Automatically closed -- issue fixed for 2 weeks with no activity.