Peter: Problem mit FF bez Darstellung von transformierten List-Objekten

Beitrag lesen

Hallo Forum :D

Also, Problem ist Folgendes, ich habe eine Navigationsleiste die in etwa so aussehen sollte:
     ________________
    /               /_______________________
   / ....  /       / ...  / .....  / ....  /
  /       /....   /______/________/_______/
 /       /       /
/_______________/

Da der IE (leider) verbreiteter ist habe ich halt mit dem gescripted und bin auch zum erwünschten Ergebnis gekommen, nur der FF stellt es leider komplett falsch da (in etwa so):
  ________________
 /               /   _______________________
/           .././.  / ... / .....  / ....  /
             / / ../..___/________/_______/
            / /
_____________/

Es sind einfach li-Elemente, mit bg und border die dann halt mit skrew / transform / filter ... "gedreht" werden.

Code für das erste Listenelement:

    ul#nav li:first-child {  
        position:relative;  
        top:-2em;  
        left:-2em;  
        width:16em;  
        height:7em;  
    }  

Alles (beide Texte und Strich) in diesem ersten größeren li-Objekt ist absolut positioniert, hat jemand eine Ahnung warum die Darstellung der beiden Browser _so_ unterschiedlich ist?

Außerdem ist auch noch die insgesamte Länge des Navigationsmenüs beim FF kürzer, was sich auch recht negativ auf das Layout auswirkt...Gibt es irgendeine Möglichkeit (ausser per PHP oder SSI oder was weiß ich verschiedene CSSs zu holen) das zu umgehen? Bin für andere Lösungvorschläge / Angehensweisen immer offen :D

Wenn ich irgendetwas vergessen haben sollte (oder einfach zum Ausprobieren :D), hier ist der ganze Code zu finden: http://pastebin.com/dcbrzDKK

Danke schonmal im Voraus!!