Das Problem resultiert aus dem display:inline für #breadcrumb li. Operas rendering engine kommt da so durcheinander, dass margin-top von #breadcrumb einen vertikalen Abstand zwischen #breadcrumb li und dem absolut darin positionierten #topics erzeugt, weil es sich zu top:1.2em für #topics addiert. Außerdem erzeugt padding-left von #breadcrumb li eine horizontale Verschiebung von #topics nach rechts, trotz left:0; für #topics, weil es sich zu left:0 von #breadcrumb addiert.
Danke, so genau hatte ich das nicht nachvollzogen. Auch verhält sich Opera unter OS X ein wenig anders als unter Windows. Ich habe den Bug gemeldet.
Workaround:
#breadcrumb { position:absolute; top:0; left:-.5em; margin-top:0; }
Das würde grundsätzlich funktionieren. position:relative
für body zerstört leider das Ergebnis, wird aber für hasLayout und weitere Positionierungen benötigt.
Für den IE6 muss außerdem noch margin-left von #topics auf 0 gesetzt werden.
IE-Workarounds baue ich in der nächsten Runde ein. Ein erster Blick lässt mein Herz bereits kräftig jubeln …
Was spricht eigentlich dagegen, float:left für die #breadcrumb li zu verwenden statt display inline?
Nichts. Ich habe es jetzt so gelöst.
Danke!
Roland