Image replacement in sidebar

[Sheldon]

I have this currently on my site:

Now, I can go into Firebug and simply replace the avatar being shown, but for whatever reason, when I transfer what I think it will be, I then get this:

This is my before code:

<xen:require css="xi_sportsbook_sidebar_recent_event.css" />
 
<li>
    <div class="sportsbookRecentIndexEvent">
        <xen:avatar user="$recentEvent" size="s" img="true" />
       
        <div class="sportsbookRecentIndexEventTitle"><a href="{xen:link sportsbook-event, $recentEvent}">{xen:helper snippet, $recentEvent.title, 25}</a></div>
        <div class="sportsbookRecentIndexEventMeta">
            <span class="sportsbookRecentIndexUser"><xen:username user="$recentEvent" />,</span>
            <xen:datetime time="$recentEvent.date_create" />
        </div>
</li>

This is the after code:

<xen:require css="xi_sportsbook_sidebar_recent_event.css" />
 
<li>
    <div class="sportsbookRecentIndexEvent">
        <img src="/10k/money.png" />
       
        <div class="sportsbookRecentIndexEventTitle"><a href="{xen:link sportsbook-event, $recentEvent}">{xen:helper snippet, $recentEvent.title, 25}</a></div>
        <div class="sportsbookRecentIndexEventMeta">
            <span class="sportsbookRecentIndexUser"><xen:username user="$recentEvent" />,</span>
            <xen:datetime time="$recentEvent.date_create" />
        </div>
</li>

Can anyone help? The change-over from Firebug to the template is apparently beyond me...

 

[Paul B]

You need to create a CSS class with the appropriate styling and apply it to the image.
Possibly floating it left, width, height, etc.

 

[Sheldon]

This was the CSS being applied to the avatar image:

How do I define that css to select my new image?

 

[Sheldon]

Well, I have it to this now:

The code:

<li>
    <div class="sportsbookRecentIndexEvent">
        <div class="bookie" src="bookie/money.png" /></div>
       
        <div class="sportsbookRecentIndexEventTitle"><a href="{xen:link sportsbook-event, $recentEvent}">{xen:helper snippet, $recentEvent.title, 25}</a></div>
        <div class="sportsbookRecentIndexEventMeta">
            <span class="sportsbookRecentIndexUser"><xen:username user="$recentEvent" />,</span>
            <xen:datetime time="$recentEvent.date_create" />
        </div>
</li>

My CSS

.sportsbookRecentIndexEvent .bookie
{
    float: left;
    height: 32px;
    width: 32px;
    clear: left;
}

It just won't grab the image.