Orlando: Opera 9 buggy bei position:absolute/relative/absolute

Beitrag lesen

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

--
-)