Block - cart graphic not shown in MSIE7 or Chrome

We are having the same experience in IE6 & IE7 (for the logged-in user). Also missing the arrow that allows the block to be expanded. Fine in Firefox and IE8.

We also have a white line across our block. See attached.

Thanks,

snepa

Which theme are you using? Does the same problem happen on another theme, like Garland? Can you provide a link to this on a live site?

stephthegeek,

We've set up a test page and activated the cart for you to take a look at (block left area at bottom):

http://kilboa.com/node/735

We use the Pixture Reloaded theme.

I don't know if it happens in another theme like Garland. I've made a customization to the header.png of our theme. If I change it to another theme I lose it. I can put it back but it takes a few extra steps. I'll have to wait until late one night when I can take our site offline to test Garland. This seems to be the only misbehaving block for what its worth.

You may have to sign up to see what we're talking about. Even as a visitor the icons should be missing though. My business partner has IE7. That was his report this afternoon. I wanted to wait until we installed RC2 to report back, hoping the issue may go away. Still present. Currently using Ubercart RC2 on Drupal 6.10

Thanks for looking into this for us.

snepa

You can switch the theme just for your user, not the whole site. It would be helpful to know if this is happening in other themes. If not, it's likely something you should take up in the Pixture issue queue.

This problem is present in the Grassland theme, too.

stephthegeek,

Ok. I turned on the Garland theme and tested that way. The icons still didn't show up in IE7. I've attached the pics for you. One with an empty cart and one with items in the cart.

thnx,

snepa

Tagging

I am having the same issue here with a custom theme based on Zen, and as far as I remember with any theme I've tried Ubercart with. The cart icon and the arrow were not shown on IE and the cart icon was missing on webkit based browsers (Chrome, Chromium, etc.).

I have fixed the issue by adding the following styles in my custom theme:

/* Fix ubercart's cart block */
.cart-block-icon-full, .cart-block-icon-empty {
    width: 16px;
    height: 16px;
    padding: 0;
    float: left;
    margin: 0 3px 0 0;
}

.cart-block-arrow {
    width: 10px;
    height: 5px;
    padding: 0;
    margin: 0 0 0 3px;
    float: right;
}

It is working fine now on every browser I've tried (IE7 - Win, Chrome - Win, Chromium - Linux, FF - Linux). However, the arrow icon is shown below the title on IE.

It seems like uc_cart_block.css is not forcing the size of the span with class of cart-block-icon* to be non-zero. Chrome apparently collapses the span because it has no content, thus no icon shows. I added "& nbsp;" to line 650 of uc_cart.module to quickly fix and that shows the icon. Of course it is not looking nice in FF. I will try some css to fix it (like min-height/min-width)

I'm using Acquia Marina 2.0.

My fix turned out pretty simple - just changed to display: inline-block in uc_cart_block.css:

.cart-block-icon-full, .cart-block-icon-empty {
  display: inline-block;
  padding: 0 12px;
  height: 16px;
}

Works in GC and FF.

Note that it also needs adjusting height to 16px and padding-top to 0px from 4px to avoid clipped cart wheels. Looks like the original css was crafted to align the image vertical position to the text using padding, but it makes the box slightly smaller (11px) than the image height(16px) when converted to inline-block. It worked with "display: inline" because text line height expands the box. Not a good css practice to begin with (it depends on text font size).

That fix could be done in custom CSS of course, but I believe it must work out of the box in all browsers. Not submitting a patch at this time as it probably not the ultimate work-anywhere fix.

Patch attached, looks okay to me in IE7, FF and Chrome.

I made a small change to the margin-top of .cart-block-icon-full, .cart-block-icon-empty, but otherwise than that it looks good to me in Firefox 3.6, 7, and 8, Opera 11, IE 6 and 8, and Chrome 15. Certainly better than it was. Committed to 6.x-2.x and 7.x-3.x.