AAC MyAAC - Highscores Box

[DukeeH]

Hello, I've highscores box working, with outifits... It's like this:

Screenshot

But the text could be higher, like beside the outfit, it's going down and i've tried everything to make it better.
Align, margin... On gesior I had a similar setup and the text was higher

Someone that understands php could help with some way to make the text higher, like:

Screenshot

boxes/highscores.php

<style type="text/css" media="all">
  .Toplevelbox {
    top: -4px;
    position: relative;
    margin-bottom: 10px;
    width: 180px;
    height: 205px;
  }
  .top_level {
    position: absolute;
    top: 29px;
    left: 6px;
    height: 205px;
    width: 168px;
    z-index: 20;
    text-align: center;
    padding-top: 6px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 9.2pt;
    color: #FFF;
    font-weight: bold;
    text-align: right;
    text-decoration: inherit;
    text-shadow: 0.075em 0.075em #333
  }
  #Topbar a {
  text-decoration: none;
  }
  .online {
      color: #0F0;
  }
  .offline {
      color: #FF0000;
  }
  a.topfont {
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    text-decoration: none
  }
  a:hover.topfont {
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    color: #CCC;
    text-decoration:none
  }
</style>
<div id="Topbar" class="Themebox" style="background-image:url(<?PHP echo $template_path; ?>/images/themeboxes/highscores/highscores.png);">
  <div class="top_level" style="background:url(<?PHP echo $template_path; ?>/images/themeboxes/bg_top.png)" align="">
  <font size="0.1"><br></font>
    <?php
    foreach(getTopPlayers(5) as $player) {
        echo '<div style="text-align:left"><a href="'.getPlayerLink($player['name'], false).'" class="topfont ' . ($player['online'] == 1 ? 'online' : 'offline') . '">
        <img style="margin-left: -30px; margin-top: -40px ;" src="outfitter/outfitter.php?id='.$player['looktype'].'&amp;addons='.$player['lookaddons'].'&amp;head='.$player['lookhead'].'&amp;body='.$player['lookbody'].'&amp;legs='.$player['looklegs'].'&amp;feet='.$player['lookfeet'].'">
        <span style="color: white">'.$player['rank'].' - </span>'.$player['name'].'
        <br><small><span style="margin-left: 50px; color: white">Level: ('.$player['level'].')</span></small>
      </div>';
    }
    ?>
<div class="Bottom" style="background-image:url(<?PHP echo $template_path; ?>/images/general/box-bottom.gif); top: 209px;; left:-5px;">
</div>
</div>
</div>
<br/><br/><br/>

Thanks for your time.

-- SOLVED:
Searched alot and found out about using position: absolute / position: relative.
Did some testing and fixing and got it to work.

 

[DukeeH]

up

 

[Bogart]

line 54

<img style="margin-left: -30px; margin-top: -40px ;"

to

<img style="margin-left: -30px; margin-top: -25px ;"

 

[slaw]

Did the answer provided by @Bogart resolved your issue?

 

[DukeeH]

@Bogart @slawkens

No, it didn't.
Screenshot
I want to move the text up and keep the outfit there, it seems like the text always stays on the bottom of the image.

 

[DukeeH]

Up

 

[DukeeH]

edit.
-- SOLVED:
Searched alot and found out about using position: absolute / position: relative.
Did some testing and fixing and got it to work.