I've run into a bit of an anoyance on a project I'm working on, I have stat bar images inside a box with text over them and on occasion in mozilla based browsers the images break out and will be in random places above or below where they should be.

This is the html behind the bars

HTML Code:
<if="ipb.member['id']">
 	<br /><br />{ipb.lang['level']}{$author['level']}<br />
 	 {$ibforums->attack['frag_name']}: {$author['frags']}<br />
 	 {$ibforums->attack['moneyname']}: {$author['money']}
 	<table cellspacing="2" cellpadding="0" border="0">
 		<tr>
 			<td align="right"><strong>{ipb.lang['hp']}</strong></td>
 			<td align="left">
 		    	<div style="border: 1px solid #000; background-color: #B7A5FF; width: 100px; height: 13px;">
 		    		<img src="./sources/atk/images/hp.gif" style="width: {$author['hpper']}px; height: 13px; position: absolute; z-index: 1; float: left;" />
 		    		<div style="position: relative; z-index: 2; color: #FFF; text-align: center;">{$author['hp']}/{$author['maxhp']}</div>
 				</div>
 			</td>
 		</tr>
 		<tr>
 			<td align="right"><strong>{ipb.lang['str']}</strong></td>
 			<td align="left">
 		    	<div style="border: 1px solid #000; background-color: #B7A5FF; width: 100px; height: 13px;">
 		    		<img src="./sources/atk/images/str.gif" style="width: {$author['strper']}px; height: 13px; position: absolute; z-index: 1; float: left;" />
 		    		<div style="position: relative; z-index: 2; color: #FFF; text-align: center;">{$author['str']}/{$author['maxstr']}</div>
 				</div>
 			</td>
 		</tr>
 		<tr>
 			<td align="right"><strong>{ipb.lang['exp']}</strong></td>
 			<td align="left">
 		    	<div style="border: 1px solid #000; background-color: #B7A5FF; width: 100px; height: 13px;">
 		    		<img src="./sources/atk/images/exp.gif" style="width: {$author['expper']}px; height: 13px; position: absolute; z-index: 1; float: left;" />
 				    <div style="position: relative; z-index: 2; color: #FFF; text-align: center;">{$author['exp']}/{$author['nexp']}</div>
 				</div>
 			</td>
 		</tr>
 	</table>
 	{$author['attack_link']}{$author['donate_link']}
 </if>
right clicking will send the images back to where they should be.

this is how it looks like (both shots taken in firefox 0.9.2)



and this is an example of what happens



thats a very minor example, it's come out a lot farther than that at times

I'm stumped on this one (much better at php coding than I am with html). Is it something I'll have to live with or can it be fixed? Any help would be much appreciated.