phase: z-index funktioniert nicht im IE

SELF-Forum

z-index funktioniert nicht im IE

phase
– Informationen zu den Bewertungsregeln

hi, ich habe einen kalender in dem ich bei events einen tooltip anzeige.
Leider werden die Tooltips im IE hinter den anderen Events angezeigt, sodass diese dadrüber liegen. Offensichtlich wird der z-index vom Kindelement ignoriert. hier mein HTML-Source:

  
<td class="days active weekend col_last">  
<div class="tooltip_container">24  
  <div class="tooltip">24.08.2008 - 31.08.2008<br /><a href="event.html" class="event" title="Event">Ein tolles Event</a><br /><br /></div>  
</div>  
</td>

und hier mein css dazu:

  
#pagemain div.moo_cal td.active  
{  
 cursor:pointer;  
}  
  
#pagemain div.moo_cal td.active div.tooltip_container  
{  
 position:relative;  
 font-weight:bold;  
 color:#ff9a00;  
 z-index:100;  
  
  
}  
  
#pagemain div.moo_cal td.active div.tooltip_container div.tooltip  
{  
 position:absolute;  
 width:160px;  
 height:auto;  
 right:0;  
 top:0;  
 display:none;  
 padding:10px;  
 text-align:left;  
 background-color:#ff9a00;  
 font-weight:normal;  
 font-size:11px;  
 color:#666;  
 cursor:default;  
 z-index:102;  
  
}  
  
#pagemain div.moo_cal td.active div.tooltip_container div.tooltip a  
{  
 float:left;  
 display:block;  
 margin-bottom:10px;  
 background-color:#ff9a00;  
 font-weight:normal;  
 color:#fff;  
 cursor:pointer;  
 font-size:10px;  
}  
  
#pagemain div.moo_cal td.active:hover div.tooltip_container div.tooltip,  
#pagemain div.moo_cal td.active div.tooltip_container:hover div.tooltip  
{  
 display:block;  
 top:15px;  
}  
  
  
#pagemain div.moo_cal td.active div.tooltip_container div.tooltip a  
{  
 height:10px;  
 display:block;  
 margin-bottom:4px;  
}

Scheinbar hat der IE einen z-index-Bug aber eine lösung habe ich noch nicht gefunden.

Vielen Dank und Gruß,
phase

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. z-index funktioniert nicht im IE

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi, ich habe einen kalender in dem ich bei events einen tooltip anzeige.
    Leider werden die Tooltips im IE hinter den anderen Events angezeigt, sodass diese dadrüber liegen. Offensichtlich wird der z-index vom Kindelement ignoriert. hier mein HTML-Source:

    <td class="days active weekend col_last">
    <div class="tooltip_container">24
      <div class="tooltip">24.08.2008 - 31.08.2008<br /><a href="event.html" class="event" title="Event">Ein tolles Event</a><br /><br /></div>
    </div>
    </td>

      
  

> Scheinbar hat der IE einen z-index-Bug aber eine lösung habe ich noch nicht gefunden.  
  
egal wie du es anstellst, deine elemente werden in folgender reihenfolge übereinanderliegen  
  
td  
 div.tooltip\_container  
   div.tooltip  
    a  
  
das ist in der tat ein bug bzw eine nicht vollständig standardkonforme umsetzung von z-index (das betrifft afaik auch ein paar ältere opera-versionen)  
  
aber in deinem fall kann das sowieso nicht passieren, da du ja offenbar willst, dass die schichtreihenfolge exakt so ist, wie im html-code  
  
für tooltips gibts übrigens schönere lösungen (zb das title-element) und wenn das nicht reicht, lässt es sich wunderbar später gegen übersichtlicheren code mittels javascript ersetzen
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. z-index funktioniert nicht im IE

      phase
      – Informationen zu den Bewertungsregeln

      egal wie du es anstellst, deine elemente werden in folgender reihenfolge übereinanderliegen

      td
      div.tooltip_container
         div.tooltip
          a

      das ist in der tat ein bug bzw eine nicht vollständig standardkonforme umsetzung von z-index (das betrifft afaik auch ein paar ältere opera-versionen)

      aber in deinem fall kann das sowieso nicht passieren, da du ja offenbar willst, dass die schichtreihenfolge exakt so ist, wie im html-code

      für tooltips gibts übrigens schönere lösungen (zb das title-element) und wenn das nicht reicht, lässt es sich wunderbar später gegen übersichtlicheren code mittels javascript ersetzen

      Hallo suit,
      leider ist die Reihenfolge nicht so wie im Quellcode, zumindest nicht im IE7.
      Die darunter liegenden div.tooltip_container liegen über dem div.tooltip.

      Das Phänomen ist zb hier: http://animalmundi.com/seminare.html?day=20080801 zu bewundern.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. z-index funktioniert nicht im IE

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Die darunter liegenden div.tooltip_container liegen über dem div.tooltip.

        probier bitte mal eine hintergrundfarbe für die tabellenzellen aus - ggf ist der tooltip nicht hinter dem element (td) sondern nur hinter dem text

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. z-index funktioniert nicht im IE

          phase
          – Informationen zu den Bewertungsregeln

          Die darunter liegenden div.tooltip_container liegen über dem div.tooltip.
          probier bitte mal eine hintergrundfarbe für die tabellenzellen aus - ggf ist der tooltip nicht hinter dem element (td) sondern nur hinter dem text

          richtig. der tooltip ist nicht hinter dem element td sondern hintern dem element div.tooltip_container. hier durch werden die links, sprich die anderen aktiven tage über dem tooltip angezeigt. hierduch wird zum einen die schrift "zerschossen" und zum anderen kann man den link im tooltip nicht anklicken weil man beim drüberfahren mit der Maus bereits einen andern tooltip anzeigt.

          gruß,
          phase

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln