• Das kreative Thema des Monats Oktober wird vor allem diejenigen unter Euch besonders ansprechen, denen Do-it-yourself quasi im Blut liegt. Zeigt uns Eure Improvisationskünste oder fotografiert, was andere Leute sich so im Alltag zusammengestrickt haben. --> Zum Mitmachen bitte hier klicken

CSS Positionierung: Gecko VS Webkit

Slashwalker

Winterbanana
Registriert
15.05.06
Beiträge
2.213
Hallo ATler,
ich dachte eigentlich das mittlerweile die "guten" Browser CSS einheitlich rendern. Leider wurde ich eines besseren belehrt.

http://2012.fusionality.de/example.html

In Firefox und Opera passt alles (Gecko Engine), in Safari und Chrome (Webkit Engine) sind die Pfeile, die beim aktiven Tab den Bildplatzhalter überlagern um 15px nach unten versetzt.

Ich komme da grad nicht weiter. Ich habe auch schon versucht die Anordnung zu ändern, so dass im Quellcode die Liste für die Tabnavigation nach den Tabs kommen, um so ohne position abs/rel & z-index die Stapelung zu beeinflussen. Half leider auch nicht.

Any idea?
 
Das Problem tritt nur auf, wenn float:left aktiviert ist. Float und gleichzeitig relative Repositionierung ist wohl keine tolle Kombination.
Wenn ich in Safaris Element-Informationen das float-Style deaktiviere, passt die Grafik perfekt – nur der Text daneben mit dem derzeitigen CSS natürlich nicht mehr, da die Überschrift in einen neuen Block unterhalb der Grafik aufrückt. Das müsste man also dann anders positionieren.

Vielleicht gibt's auch noch bessere, ganz andere Ansätze.
 
Ja, ohne float:left; würde gehen, aber offenbar müsste ich dann extrem viel anpassen, damit der Text wieder passt.
Aber es geht viel einfacher (hinterher kann ich gut reden, wa). Ich habe das img (Pfeil) einfach vom zweiten Link in den ersten verschoben.
Wollte damit einfach nur Bild und Text trennen um dann weiter zu experimentieren, aber tada es lief einfach.