Opera 9 buggy bei position:absolute/relative/absolute

[Orlando]

Werte Gemeinde,

gegeben sei folgendes Beispiel: http://skop.net/self/opera-9-position-absolute-relative-absolute.htm

Warum positioniert Opera 9 das ul-Element mit der ID topics nicht genau unterhalb des zugehören (Eltern-)Listenelements? Beide Bereiche sind mit gelber Hintergrundfarbe markiert.

HTML:

<ul id="breadcrumb"> <!-- absolute-->  
  <li><a href="#">bar bar</a></li>  
  <li id="page"><a href="#">baz baz</a> <!-- relative -->  
    <ul id="topics"> <!-- absolute -->  
      <li class="header">bla</li>  
      <li><a href="#">#1 ...</a></li>  
    </ul>  
  </li>  
  <li>bla bla</li>  
</ul>

CSS:

body { max-width:65em; margin:auto; height:15em; border:1px solid #888; }  
  
#breadcrumb { position:absolute; top:0; }  
#breadcrumb li { display:inline; padding:0 .5em; }  
  
#topics { position:absolute; top:1.2em; left:0; padding:.2em; border:1px solid #aaa; }  
#topics li { display:block; }  
#topics .header { background-color:yellow; }  
#topics a { display:block; font-weight:normal; padding:0 .2em; }  
  
#page { position:relative; background-color:yellow; }  
#page:hover #topics { display:block; }

#breadcrumb ist absolut positioniert; #page relativ, um dessen Kind #topics für position:absolute die Ausgangskoordinaten vorzugeben.

Opera kümmert das allerdings wenig. Safari, Firefox, die CSS-Spezifikation und ich sind uns einig, dass es anders richtig wäre. Kennt jemand einen Workaround?

Roland

[Axel Richter]

Hallo,

Warum positioniert Opera 9 das ul-Element mit der ID topics nicht genau unterhalb des zugehören (Eltern-)Listenelements?

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.

Workaround:

  
...  
#breadcrumb { position:absolute; top:0; left:-.5em; margin-top:0; }  
...  

Für den IE6 muss außerdem noch margin-left von #topics auf 0 gesetzt werden.

Wegen der unterschiedlichen defaults für margin und padding setze ich immer

  
html, html * { margin:0; padding:0; }

um dann einzelnen Elementen explizit andere Werte zuzuweisen.

Was spricht eigentlich dagegen, float:left für die #breadcrumb li zu verwenden statt display inline?

viele Grüße

Axel

[Orlando]

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