When the cart has items in it, this block shows a cart icon, followed by "x items", then the total price, then link to check out. Each of these items is wrapped in its own div. However, when the cart is empty , "x items" is replaced by the word "Empty" which is not wrapped in a div. Because the other two divs containing the price and checkout link are floated left, Chrome renders "Empty" positioned to the extreme right, after the price and link to checkout. (see screen shot) In firefox it's worse, the price and checkout link float down underneath the word "Empty."
The shopping cart block is produced by a view named "shopping cart". If you edit this view, look at the "No results behavior" section of the advanced settings and there are two entries. The first is of type "Global: text area", and if you click on this to configure it you'll see it simply contains the word "Empty".
The solution I have found is to add two more "Global: text area" items to the "No results behavior" section. I add one containing the text
<div class="view-empty"> just before the text area containing "Empty", and the other I place just after, containing the text
</div>.(see screenshot) The end result is that "empty" is rendered wrapped in a div like so:
<div class="view-empty">Empty</div>. The view-empty class already exists in the theme, and causes the word Empty to be properly floated left and vertically centered. (see screenshot)
Before settling on this solution, I had originally tried simply modifiying the existing "Global:text area" element so that it contained the divs and text together all in the same field. This does avoid the need to create 2 additional text area fields, but including the markup in the same field as the word Empty makes Empty untranslateable. The following error is thrown upon trying to save the translation: "The submitted string contains disallowed HTML:
<div class='view-empty'>Empty</div> ".