My bars keep shifting

[gurpreet]

I decided to change my energy to 100 for users and 150 for donators, and since then my bars have been weird

As a temporary fix, I have made an opposite bar which is transparent. They look like this now:

http://imageshack.us/photo/my-images/801/pic1bj.png/

However, I want to remove the opposite bar so there is only the coloured bar, like this:

http://imageshack.us/photo/my-images/534/pic2kd.png/

However, when a bar isn't full, it all shifts to the center (there are no center tags or anything for this part of my page) like so:

http://imageshack.us/photo/my-images/16/pic3kg.png/

 

And finally, here's my code for that part of the page:

 

$enperc=(int) ($ir['energy']/$ir['maxenergy']*100);
$wiperc=(int) ($ir['will']/$ir['maxwill']*100);
$experc=(int) ($ir['exp']/$ir['exp_needed']*100);
$brperc=(int) ($ir['brave']/$ir['maxbrave']*100);
$hpperc=(int) ($ir['hp']/$ir['maxhp']*100);

print <<<OUT
 <small>Name:</small><small><a href='viewuser.php?u={$ir['userid']}' title='My Profile'>$gn{$u} [{$ir['userid']}] $d</a><br /></small>
 <small>Money: <font color='#238E23'>{$fm}</font><br /></small>

 <small>Level: <font color='#238E23'>{$ir['level']}</font><br /></small>
 <small>Crystals: <A href=crystaltemple.php title='Crystal Temple'><font color='#238E23'>{$ir['crystals']}</font></a></small><br />
 <small><b>Bricks:</b> <font color='#238E23'>{$ir['bricks']}  [<a href='yourstreet.php?action=buy1'>Buy</a>]</table>
<table width='100%' class='tydy' cellspacing='0'><Tr><TD>
  <small>Energy:</td><Td><img src=greenbar.png width=$enperc height=6 alt='{$ir['energy']}'> </small><small><font color='darkred'>({$ir['energy']})</small></font>$refill</td></tr><tr><td>
  <small>Will:</td><td><img src=bluebar.png width=$wiperc height=6 border='2' alt='{$wiperc}%'> </small><small><font color='darkred'>({$wiperc}%)</small></font></tr></td><tr><td>
  <small>Brave:</td><td><img src=yellowbar.png width=$brperc height=6 border='2' alt='{$ir['brave']}/{$ir['maxbrave']}'> </small><small><font color='darkred'>({$ir['brave']}/{$ir['maxbrave']})</small></font></td></tr><tr><td>
  <small>Health:</td><td><img src=greenbar.png width=$hpperc height=6 border='2' alt='{$hpperc}%'> </small><small><font color='darkred'>({$hpperc}%)</small></font></td></tr><tr><td>
  <small>Exp:</a></td><td><img src=bluebar.png width=$experc height=6 border='2' alt='{$experc}%'> </small><small><font color='darkred'>({$experc}%)</small></font></tr></td><tr><td></table>

//More code here

 

Any ideas? I can't see anything wrong with the code

[Lithium]

Try using fixed width bars, http://makewebgames.io/showthread.php/35989-Progress-bar-All-versions-all-engines <- this might help ;)

[gurpreet]

I tried that before, but I couldn't get it to work properly. Thanks for the reply though

Edited October 12, 2011 by gurpreet

[W3Theory || Peter]

There is no set width for the td, so it will when it feels it needs to. Set a width for the the left td to like 25% or something.

[gurpreet]

Can't believe I didn't spot that!

Not quite sure how tables work for layouts, but adding a td width property just for the energy seems to have fixed all of the rows.

Thanks for that reply Peter