Viennamade: 2 Kasterln übereinander - IE/Opera

Hallo Forum!

Ich möchte 2 Boxen übereinanderlegen. Die untere (zindex=1) soll mittels einem absolut positionierten div-Element, die obere (zindex=100) mit einem Verweis-Element ausgezeichnet werden. Mein Versuch (s.u.) funktioniert im IE6.1 - dort liegen die Boxen exakt übereinander -, aber nicht im Opera 7.21 - da ist die durchs Verweis-Element gezeichnete Box viel kleiner.

Meine CSS-Datei sieht so aus:
#sitmap div.menuBar {
  position:absolute;
  top:0px;
  left:0px;
  width:400px;
  height:400px;
}

#sitmap div.menuBar a.mnuBtn1 {
  border: 2px solid red;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  position: relative;
  z-index: 100;
}

div.btn_bg { position:absolute; z-index:1; border:1px solid; background-color:#FFFFFF; }

#mapf_hal { top:130px; left:40px; width:112px; height:37px; }
#mapb_hal { top:1px; left:0px; width:112px; height:37px; }

Meine html-Datei sieht so aus:
<div id="sitmap">
 <div class="menuBar">
 <div id="mapf_hal" class="btn_bg"><a id="mapb_hal" class="mnuBtn1" href="fieber.html" target="Seite">Fieber</a></div>
 </div>
</div>

Ich hoffe, daß dies für jemanden von Euch ein "Klaks" ist, für mich ist es keiner.
Danke
Viennamade

  1. Hi,

    #mapb_hal { top:1px; left:0px; width:112px; height:37px; }

    #mapb_hal selektiert ein a-Element.
    a ist ein non-replaced inline-Element.
    width und height treffen auf non-replaced inline Elemente nicht zu (der IE hat da einen Bug und interpretiert die Werte trotzdem).
    Setze die display-Eigenschaft für das a-Element auf einen geeigneten Wert.

    Wozu dient das div #mapf_hal?
    Warum positionierst Du nicht direkt das a-Element?

    cu,
    Andreas

    --
    Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
    http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/