Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.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
Comment #1
hass CreditAttribution: hass commentedOr may use
width: auto;Comment #2
Island Usurper CreditAttribution: Island Usurper commentedI 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.
Comment #3
hass CreditAttribution: hass commentedI'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... :-)
Comment #4
hass CreditAttribution: hass commentedThis 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...
Comment #5
jmuessig CreditAttribution: jmuessig commentedThe 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.
Comment #6
hass CreditAttribution: hass commentedSolution is in #1
Comment #7
jmuessig CreditAttribution: jmuessig commentedI 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.
Comment #8
TR CreditAttribution: TR commentedTagging
Comment #9
longwaveThe 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.
Comment #10
longwaveSuggested fix from #0 committed to both branches.