list-style-image to put ICON_IMAGE_TINYCART on the left of order history list item

[dbrewster]

Howdy.

In the default CSS and template, it looks like the bitty shopping cart image goes at the end of the listing, instead of taking the place of the bullet. I've configured the CSS to use the shopping cart instead of a bullet but I'm having a HECK of a time trying to get the list positioned properly. There's too much white space to the top, left, and right.

Here's a screen shot, cuz you can't see how it looks unless you place orders, and this is my test shop anyway. Getting ready for the big update.

Oh, it looks about the same in FF and IE.



I've really tried to muscle the CSS (looks ridiculous) but I can't figure out what is overriding it all. Yes, I use the FireFox CSS plugin tool, it totally rocks. But I still can't figure out this particular layout problem.

I've tried everything that has occurred to me, in the order of "most likely" to "what the heck path is the inheritance taking on this!?"

/* * * Modified, see below. * * */
/*.orderHistList {
	margin: 1em;
	padding: 0.2em 0em;
	} */
#orderhistoryContent  { margin:0; padding:0; } 
.orderHistList sideBoxContent ul {margin:0; padding:0}
.orderHistList li {
	list-style-image: url(../images/icons/cart.gif); 
        margin-left:0; padding-left:0;
}

I stuck in that .sideBoxContent there bec I thought it was applying its padding to .orderHistList, so I moved all of these definitions below .sideBoxContent, but, still, not working. Oh yes, I tried #orderhistoryContent sideBoxContent too.

Would looove to hear some suggestions.

Oh yeah, [MY CUSTOM TEMPLATE]/sideboxes/tpl_order_history.php looks like this (I just carved out the part that places the image):

  $content = "";
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  $content .= '<ul class="orderHistList">' . "\n" ;

  for ($i=1; $i<=sizeof($customer_orders); $i++) {

        $content .= '<li><a href="' . zen_href_link(zen_get_info_page($customer_orders[$i]['id']), 
        'products_id=' . $customer_orders[$i]['id']) . '">' . $customer_orders[$i]['name'] . '</a></li>' . "\n" ;
  }
  $content .= '</ul>' . "\n" ;
  $content .= '</div>';

[dbrewster]

In case anyone else wants to use this idea, here's how I solved it. However, FF1.8 and IE7.0 are still not fully in agreement on handling padding and margin for lists.

#orderhistoryContent  { margin:-0.5em 0; padding:0; } 
.orderHistList sideBoxContent ul {margin:0; padding:0}
.orderHistList li {
	list-style-image: url(../images/icons/cart.gif); 
        margin:0 0.2em 0 -1em; padding:0;
}

---Diana

[dbrewster]

in FireFox 1.8


in IE7