z-index wird im IE6 nicht beachtet

[Ralf]

Hallo!

Ich habe eine Anwendung, wo verschiedene Inhalte per Karteireiter ausgewählt werden können. Bisher habe ich die Reiter mit fester Größe und position:absolute gesetzt und konnte daher auch problemlos einen "aktiven" Reiter darüber positionieren.

Nun möchte ich das variabler gestalten und habe daher die Reiter mit float:left aneinandergehängt. Hier die Ausgangsposition ohne aktiven Reiter: Test1

Die Reiter sind bereits mit position:relative gesetzt, damit "innerhalb" eines Reiters ein aktiver Reiter mit position:absolute gesetzt werden kann. Dieser wird dann lediglich nach allen Richtungen etwas vergrößert und auf einen Ausgangspunkt 2px links/oben gesetzt, so dass der gewünschte Effekt eintritt: Test2

Leider funktioniert das aber nicht im Internet Explorer (ich habe den IE6 installiert). Dort wird der absolut mit z-index:5 positionierte Reiter nicht im Vordergrund angezeigt, sondern bleibt hinter den mit position:relative gesetzten Reitern. Dass es mit position zusammenhängt, sieht man daran, dass der absolut positionierte Reiter den oberen Rand der Inhaltsbox (ohne position) überlagert.

Kann man das irgendwie umgehen? Oder gibt es einen besseren Ansatz, um den gewünschten Effekt zu erreichen?

Die inaktiven Reiter bekommen einen onClick Handler, der den Inhalt wechselt und dem jeweiligen aktiven Reiter das display:none wegnimmt und bei den anderen entsprechend setzt.

Wie erwähnt, habe ich eine funktionierende Lösung, die komplett, mit position:absolute und fixen Größen arbeitet, muss aber jetzt einen Reiter einfügen ...

Ralf

[Axel Richter]

Hallo,

Die Reiter sind bereits mit position:relative gesetzt, damit "innerhalb" eines Reiters ein aktiver Reiter mit position:absolute gesetzt werden kann. Dieser wird dann lediglich nach allen Richtungen etwas vergrößert und auf einen Ausgangspunkt 2px links/oben gesetzt, so dass der gewünschte Effekt eintritt: Test2

Leider funktioniert das aber nicht im Internet Explorer (ich habe den IE6 installiert).

Ja, weil _alle_ Tabs position:relative gesetzt sind und die weiter hinten im Quelltext stehenden per default über den weiter vorn stehenden angezeigt werden. Es hilft deshalb nichts, den z-index des _im_ Tab absolut positionierten DIVs zu erhöhen, weil der Tab selbst schon unter dem nächsten Tab liegt. Du müsstest den z-index des Tabs erhöhen, aber nur des aktiven Tabs. In Deinem jetzigen Markup etwa so:

  
...  
      <div class="tab underlay">  
        Einstellungen  
<div class="tab overlay">Einstellungen</div>  
      </div>  
...  

  
.underlay {  
 z-index:1;  
         }  

Oder gibt es einen besseren Ansatz, um den gewünschten Effekt zu erreichen?

Die inaktiven Reiter bekommen einen onClick Handler, der den Inhalt wechselt und dem jeweiligen aktiven Reiter das display:none wegnimmt und bei den anderen entsprechend setzt.

Ich würde aus Deinem DIV-Konstrukt zunächst mal ein UL/LI-Markup machen:

  
    <ul id="header">  
      <li class="tab">  
        Vorschau  
      </li>  
      <li class="tab underlay">  
        Einstellungen  
        <div class="tab overlay">Einstellungen</div>  
      </li>  
      <li class="tab">  
        Info  
      </li>  
    </ul>  

Das DIV."tab overlay" würde ich nicht direkt ins Markup schreiben, sondern vom JavaScript bei Bedarf erzeugen und ins DOM einhängen lassen.

viele Grüße

Axel

[Ralf]

Hallo,

»»... Du müsstest den z-index des Tabs erhöhen, aber nur des aktiven Tabs.

Danke - das ist der Punkt.

Ich würde aus Deinem DIV-Konstrukt zunächst mal ein UL/LI-Markup machen:

Ist aber nur Kosmetik - oder?

Das DIV."tab overlay" würde ich nicht direkt ins Markup schreiben, sondern vom JavaScript bei Bedarf erzeugen und ins DOM einhängen lassen.

So wird es auch jetzt schon gemacht - ich wollte nur die absolute Positionierung der Tabs vermeiden.

Ralf

[Axel Richter]

Hallo,

Ich würde aus Deinem DIV-Konstrukt zunächst mal ein UL/LI-Markup machen:

Ist aber nur Kosmetik - oder?

Nein, das Markup ist _auch_ dazu da, solchen HTML-Viewern eine sinnvolle Anzeige zu ermöglichen, die weder CSS noch JavaScript interpretieren. Wenn Deine Karteireiter also eine Auflistung von Kurzbezeichnungen der vorhandenen wählbaren Inhalte (also eine Art Menü) sind, solltest Du sie auch so auszeichnen. Übrigens solltest Du sie auch mit A[href]-Elementen verlinken, auch wenn das JavaScript diese Links dann wieder "entschärfen" kann.

viele Grüße

Axel

[Ralf]

Hallo,

Nein, das Markup ist _auch_ dazu da, solchen HTML-Viewern eine sinnvolle Anzeige zu ermöglichen, die weder CSS noch JavaScript interpretieren.

Das ist in diesem Fall zu 100% auszuschließen, weil bereits die Anzeige vollständig per Javascript erzeugt wird.

Wenn Deine Karteireiter also eine Auflistung von Kurzbezeichnungen der vorhandenen wählbaren Inhalte (also eine Art Menü) sind, solltest Du sie auch so auszeichnen.

Als Menü habe ich das bisher nicht angesehen. Es ist eine Darstellung, wie sie auch z.B. in Windows in Einstellungen benutzt wird. Man könnte das natürlich als Menü ansehen ...

Übrigens solltest Du sie auch mit A[href]-Elementen verlinken, auch wenn das JavaScript diese Links dann wieder "entschärfen" kann.

Das wäre in diesem Fall definitiv fehl am Platz, da es sich bei den Inhalten um absolut positionierte DIV handelt, von denen das aktivierte per .style.display = "" zur Ansicht gebracht wird (und das zuvor angezeigte mit display="none" wieder verschwindet).

Ralf