Problem mit FF bez Darstellung von transformierten List-Objekten

[Peter]

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!!

[Cheatah]

Hi,

Da der IE (leider) verbreiteter ist habe ich halt mit dem gescripted

mal abgesehen davon, dass "gescripted" bei CSS ein ziemlich widersinniger Ausdruck ist: Falscher Ansatz. Verfasse Deinen Code standardkonform und so, dass er bei weitgehend allen Browsern sowohl richtig als auch wie gewünscht funktioniert, und fixe dann für die wenigen übrig gebliebenen Browser mittels sauberer CSS-Hacks die Einzelprobleme.

und bin auch zum erwünschten Ergebnis gekommen, nur der FF stellt es leider komplett falsch da (in etwa so):

Wie stellt es Safari dar? Wie stellt es Opera dar? Wie stellt es Chrome dar? ...

Cheatah

[Peter]

mal abgesehen davon, dass "gescripted" bei CSS ein ziemlich widersinniger Ausdruck ist

Ups, sorry...kommt nicht wieder vor ^^

Verfasse Deinen Code standardkonform

Ich war mir bei dem Code keiner "unstandartisierten" Schreibweise bewusst, ich kenn mich nicht so gut aus (was jetzt genau standartisiert ist und was nicht), aber prinzipiell ist glaub ich alles recht simpel gehalten (absolute und relative positioning ist ja hoffentlich noch regelkonform).

Wie stellt es Safari dar? Wie stellt es Opera dar? Wie stellt es Chrome dar? ...

Habe ich noch nicht ausprobiert (ausser Opera, der weder skrew noch transform noch filter kennt -.-), zuerst sollte die Website mal auf IE und dann auf FF laufen, wenn diese beiden (am weitesten verbreiteten) Browser mal funktionieren, kümmere ich mich um die anderen ;)

mfg Peter

[Deus Figendi]

Habe ich noch nicht ausprobiert (ausser Opera, der weder skrew noch transform noch filter kennt -.-), zuerst sollte die Website mal auf IE und dann auf FF laufen, wenn diese beiden (am weitesten verbreiteten) Browser mal funktionieren, kümmere ich mich um die anderen ;)

Wie C. schon sagte, schaffe deine Seite auf einem Standardkonformen Browser und passe sie dann "den anderen" (alias IE) an.
Am Ehesten bietet sich imho Opera an, weil das der Browser ist, der am Schnellsten und als erstes immer die Standards korrekt beherrscht. Alle anderen Browser versuchen es nur irgendwie ^^

Zudem ist deine Annahme falsch. Ich habe deinen Code in ein Dokument geworfen und mit Iron (Chrome) und Opera geöffnet, nachdem ich die Browser-Speziefischen CSS-Statements auf deren Engines gemünzt hatte:

-moz-transform: skewX(-45deg);  
        -o-transform: skewX(-45deg);  
        -webkit-transform: skewX(-45deg);  
        transform: skewX(-45deg);  
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-1, M21=0, M22=1, SizingMethod="auto expand");  
        -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-1, M21=0, M22=1, SizingMethod="auto expand")';

Ein Safari oder InternetExplorer steht mir gerade nicht zur Verfügung.
Und siehe da: Überall sieht es so aus wie im FF also vermutlich so wie es sein sollte.

Also ändere deine Seite am Besten so, dass sie in FF, Opera, Chrome, Safari und hastenichgesehen funktionier und dann korrigierst du die Fehler, die der IE da hinein baut.

Du hast nichts standard-unkonform gebaut soweit ich das sehen konnte, aber das Resultat, welches du erwartet hast entspricht nicht dem, welches dabei raus kommen muss.

Wie du die IE-Anpassungen dann machst ob mit CSS-Hacks (wie du schon benutzt hast) oder CCs oder noch anders ist mir persönlich völlig wurst, aber andere werden dir von ihren Ansichten vielleicht noch berichten :)