I am trying to put the little cart image along with the Cart is empty text or whatever the dollar amount in my nav bar after the my account link.
I once got it in the nav bar but it was right up against the my account link text. I couldn't figure out how to right align it nicely. Even then my whole design broke in Firefox.
This is how my head.tpl looks with the css. Can someone tell me how I can get the image on the far right. It is not looking good at the moment? Without the cart image there, everything lines up nicely in both IE and Firefox.
head.tpl
************
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td>
<div class="hnav">
<ul>
<li><a href="http://www.womansworld.com.au/dev/xcart/home.php">Home</a></li>
<li><a href="http://www.womansworld.com.au/dev/xcart/help.php?section=contactus&mode=update">Contact Us</a></li>
<li><a href="http://www.womansworld.com.au/dev/xcart/register.php">Register</a></li>
<li><a href="http://www.womansworld.com.au/dev/xcart/help.php?section=login">My Account</a></li>
</ul>
</td>
{include file="customer/main/minicart.tpl"}
</div>
</tr>
</table>
minicart.tpl
*******************
{if $minicart_total_items > 0}
<td rowspan="2" width="23"><a href="cart.php"><img src="{$ImagesDir}/cart_full.gif" width="19" height="16" alt="" /></a></td>
<td class="VertMenuItems"><b>{$lng.lbl_cart_items}: </b></td>
<td class="VertMenuItems">{$minicart_total_items}</td>
<td class="VertMenuItems"><b>{$lng.lbl_total}: </b></td>
<td class="VertMenuItems">{include file="currency.tpl" value=$minicart_total_cost}
</td>
{else}
<td rowspan="2" width="23"><img src="{$ImagesDir}/cart_empty.gif" width="19" height="16" alt="" /></td>
<td class="VertMenuItems" align="center"><b>{$lng.lbl_cart_is_empty}</b></td>
{/if}
Associated CSS
*********************
.hnav ul
{
margin:0;
width: 670px;
padding-left: 190px;
list-style: none;
float:left;
background: #FFFF00 url(images/mainNavBg.jpg) repeat-x;
}
.hnav ul li {
float: left;
}
.hnav ul li a {
display:block;
padding: 0 2em;
line-height: 2.1em;
background: url(images/divider2.jpg) repeat-y left top;
color: #000000;
}
I also tried moving the width and padding from the .hnav ul to just .hnav but that made no difference.