Genaue Positionierung von Zahlen

[Webwolf]

Hallo Community,

ich musste mich heute wieder einmal mit Ausrichtungen von Zahlen bzw. div-Elemente auseinader setzen, die sich im Grunde an ein (Hintergrund-)Bild richten sollen.

Um das ganze verständlicher zu demonstrieren habe ich hier mal das dazugehörige Bild hochgeladen:

Ich habe das ganze zunächst mithilfe von div-Elementen und den Angaben von top und left gelöst, was im Firefox auch ganz gut aussieht. Leider stellen die Browser die Positionierung unterschiedlich dar, was mich wiederum mit dieser Methode dazu bringt mit Browserweichen zu arbeiten.

Browserweichen versuche ich aber immer wieder zu vermeiden.

<div style="background:url('images/windows/attributes.jpg');width:256px;height:448px;font-size:0.8em;color:white">  
    <div align="center" style="width:150px;position:relative;left:80px;top:33px;">Player</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:35px;">hometown</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:37px;">Team-XY</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:39px;">0 / 0</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:41px;">20</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:43px;">Krieger</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:45px;">50</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:47px;">14706 / 254576</div>  
  
    <div align="center" style="width:150px;position:relative;left:80px;top:56px;">2134 / 2134</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:58px;">7878 / 7878</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:60px;">105 / 312</div>  
  
    <div align="center" style="float:left;width:47px;position:relative;left:80px;top:69px;">20</div>  
    <div align="center" style="float:left;width:47px;position:relative;left:147px;top:69px;">16</div>  
  
    <div align="center" style="width:47px;position:relative;left:80px;top:71px;">76</div>  
    <div align="center" style="float:left;width:47px;position:relative;left:194px;top:55px;">32</div>  
    <div align="center" style="width:47px;position:relative;left:194px;top:57px;">0</div>  
</div>

Hab das ganze mal schnell hochgeladen:
http://fhx-online.netai.net/test.html

Nun, da ich mich vor Kurzem mit den GD-Funktionen von PHP befasst habe, wäre ich also auch in der Lage sowas mit PHP zu bewerkstelligen (Bild generieren).
Dabei weiß ich allerdings nicht, ob das in diesem Falle sinnvoll wäre, da das Generieren eines Bildes etwas länger braucht und Server-Leistung in anspruch nimt.

Wie würde man an sowas dran gehen? wie würdet ihr soetwas lösen?
Würde mich über Tips und Hilfestellungen freuen =)