Matty: UL wird im IE überdeckt...

.. ich lasse ein UL Element per DOM dynamisch anzeigen (auch in der größe etc.) es ist absolute Positioniert und funktioniert auch soweit ganz gut. Nur im IE Wird dieses UL element von einem anderen UL Element überdeckt... obwohl mein dynamisches Element z-index 60 hat und das andere Element 0 ...

Jemand ne Idee wieso?

Danke für Hinweise!

  1. Hat denn gar niemand eine Idee? Das ist doch ein bekanntes Problem im IE so wie ich das in Erinnerung habe.. oder?

    Finde nur nix im Netz dazu (vermutlich falsche Suchbegriffe?!)

    Dankö!

    .. ich lasse ein UL Element per DOM dynamisch anzeigen (auch in der größe etc.) es ist absolute Positioniert und funktioniert auch soweit ganz gut. Nur im IE Wird dieses UL element von einem anderen UL Element überdeckt... obwohl mein dynamisches Element z-index 60 hat und das andere Element 0 ...

    Jemand ne Idee wieso?

    Danke für Hinweise!

    1. Hi,

      Hat denn gar niemand eine Idee? Das ist doch ein bekanntes Problem im IE so wie ich das in Erinnerung habe.. oder?

        
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      <html xmlns="http://www.w3.org/1999/xhtml">  
      <head>  
      <title>...</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
      <style type="text/css">  
        
      <!-- Copy&Paste _gesamtes_ Stylesheet -->  
        
      </style>  
        
      </head>  
      <body>  
        
      <!-- Copy&Paste  Seiteninhalt -->  
        
      </body>  
      </html>  
      
      

      Grüße,
      Engin
       GYRO

      --
      Dilated peoples|Team Vestax
      Gut ist der, der nach dem finden noch weiß, was er suchte.
  2. hi,

    bitte bleibe in deinem bestehenden Thread, und unterlasse Doppelpostings.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Naja, mein bestehnder Thread dreht sich ja um ein ganz anderes Thema... und  dort wurde mir ja auch noch nicht geholfen :/

      Aber okay, danke für den Hinweis!

      hi,

      bitte bleibe in deinem bestehenden Thread, und unterlasse Doppelpostings.

      gruß,
      wahsaga

      1. Naja, mein bestehnder Thread dreht sich ja um ein ganz anderes Thema... und  dort wurde mir ja auch noch nicht geholfen :/

        Naja, sagen wir mal so - ich hab jetzt beide Threads gelesen, aber du rückst nicht mit Code raus und versteigerst dich auf deine Beobachtungen, so läßt sich natürlich kaum helfen (ausser jemand kann hellsehen - was wahsaga - Nomen est Omen - ja wenigstens versucht).

        Ich kann das von dir beschrieben Verhalten im IE nicht nachvollziehen, er stellt immer das Element mit dem höheren z-index ale oberstes Element dar (solange es kein Element enthält das den z-index ignoriert)

        Struppi.

        1. Okay dann poste ich hier halt mal einen kleinen Ausschnitt aus dem Source...

            
          li id="edit_link_3" class="edit_link level_0">  
          <div class="find_box">  
          <form>  
          <input class="find_input" autocomplete="off"/>  
          <input id="hid_3" type="hidden"/>  
          <input id="col_amount_3" type="hidden" value="5"/>  
          <input type="button" value="GO"/>  
          </form>X  
          </div>  
          <div id="spare_3" class="spare_box"/>  
          <div id="col_35" class="box filled_box">x</div>  
          <div id="col_14" class="box filled_box">x</div>  
          <div id="col_10" class="box filled_box">x</div>  
          <div id="col_33" class="box filled_box">x</div>  
          <div id="col_34" class="box filled_box">x</div>  
          <div class="add_col_box">  add column</div>  
          <ul class="edit_list_drag">  
          <a html="#" style="text-decoration: underline;">add subrow</a>  
          </ul>  
          ...  
          
          

          AutoCompleter

            
          <ul class="autocompleter-choices" style="z-index: 600; visibility: visible; opacity: 0;"><li>test</li></ul>
          

          die Autocompleter List wird dort dargestellt (dynamisch), wo ich das X gemacht habe...

          die Liste ("edit_list_drag") verdeckt den Autocompleter im IE!...

          CSS

            
          ul.autocompleter-choices  
          {  
           position:    absolute;  
           margin:     0;  
           padding:       0;  
           list-style:    none;  
           border:     1px solid #eee;  
           background-color:  white;  
           border-right-color:  #ddd;  
           border-bottom-color: #ddd;  
           text-align:    left;  
           font-family:   Verdana, Geneva, Arial, Helvetica, sans-serif;  
           z-index:    600;  
           display :block;  
          }  
            
          ul.autocompleter-choices li  
          {  
           position:    relative;  
           padding:    0.1em 1.5em 0.1em 1em;  
           cursor:     pointer;  
           font-weight:   normal;  
           font-size:    1em;  
          }  
           ul.edit_list_drag {  
             background-color: #F8A400;  
           cursor: move;  
           font-size:16px;  
           clear:both;  
           position:relative;  
           z-index:10;  
            }  
          
          

          So... hoffe das hilft euch und mir schlussendlich weiter ;o)

          Danke!

          Naja, mein bestehnder Thread dreht sich ja um ein ganz anderes Thema... und  dort wurde mir ja auch noch nicht geholfen :/

          Naja, sagen wir mal so - ich hab jetzt beide Threads gelesen, aber du rückst nicht mit Code raus und versteigerst dich auf deine Beobachtungen, so läßt sich natürlich kaum helfen (ausser jemand kann hellsehen - was wahsaga - Nomen est Omen - ja wenigstens versucht).

          Ich kann das von dir beschrieben Verhalten im IE nicht nachvollziehen, er stellt immer das Element mit dem höheren z-index ale oberstes Element dar (solange es kein Element enthält das den z-index ignoriert)

          Struppi.

          1. Okay dann poste ich hier halt mal einen kleinen Ausschnitt aus dem Source...

            bitte zitiere vernünftig (ich hab das Gefühl das wurde dir schon gesagt)

            Dein Code enthält eine Menge Ungereimheiten.

            li id="edit_link_3" class="edit_link level_0">

            soll das ein Start Tag sein? (Ich vermute)

            <div class="find_box">
            <form>
            <input class="find_input" autocomplete="off"/>
            <input id="hid_3" type="hidden"/>
            <input id="col_amount_3" type="hidden" value="5"/>
            <input type="button" value="GO"/>
            </form>X
            </div>

            nur der Gültigkeit wegen, besser wäre es das DIV in das FORM zu packen. Den input Elemente müssen in einem Blockelemt sein.

            <div id="spare_3" class="spare_box"/>

            Was ist das?

            <ul class="edit_list_drag">
            <a html="#" style="text-decoration: underline;">add subrow</a>
            </ul>

            Soll das eine Liste sein?

            <ul class="autocompleter-choices" style="z-index: 600; visibility: visible; opacity: 0;"><li>test</li></ul>

            Aha z-index = 600

            die Liste ("edit_list_drag") verdeckt den Autocompleter im IE!...

            logisch,

            z-index:    600;

            dessen z-index ist auch 600

            {
            position:    relative;
            padding:    0.1em 1.5em 0.1em 1em;
            cursor:     pointer;
            font-weight:   normal;
            font-size:    1em;
            }

            wozu ist hier das position relative gut?

            So... hoffe das hilft euch und mir schlussendlich weiter ;o)

            Jein, ich finde den CSS Code auf den ersten Blick sehr willkürlich und erkenne nicht was du erreichen willst, weiterhelfen, würde uns vielleicht ein Code, der das tut was du beschriebst und denn man testen kann, also nicht lediglich Ausschnitte, sondern evtl. eine Testseite.

            Struppi.

            1. hi,

              nur der Gültigkeit wegen, besser wäre es das DIV in das FORM zu packen. Den input Elemente müssen in einem Blockelemt sein.

              Abgesehen davon, dass es nur in Strict der Fall ist - die Inputs sind in einem Blockelement, nämlich Form.
              Aber Form darf seinerseits (in Strict) keine Inlineelemente als direkte Nachfahren enthalten - _deshalb_ braucht es erst mal was block-artiges.

              gruß,
              wahsaga

              --
              /voodoo.css:
              #GeorgeWBush { position:absolute; bottom:-6ft; }
              1. Abgesehen davon, dass es nur in Strict der Fall ist - die Inputs sind in einem Blockelement, nämlich Form.
                Aber Form darf seinerseits (in Strict) keine Inlineelemente als direkte Nachfahren enthalten - _deshalb_ braucht es erst mal was block-artiges.

                Ich wußte es ist falsch was ich sage, aber bevor ich nichts dazu sage ... ich finde den Spruch von Dieter Nuhr blöd  ;-)

                Struppi.

            2. Okay dann poste ich hier halt mal einen kleinen Ausschnitt aus dem Source...

              bitte zitiere vernünftig (ich hab das Gefühl das wurde dir schon gesagt)

              Dein Code enthält eine Menge Ungereimheiten.

              li id="edit_link_3" class="edit_link level_0">

              soll das ein Start Tag sein? (Ich vermute)

              Ich sag doch, dass ist nur ein Auschnitt.. der der kleine Teil einer  großen Liste

              <div class="find_box">
              <form>
              <input class="find_input" autocomplete="off"/>
              <input id="hid_3" type="hidden"/>
              <input id="col_amount_3" type="hidden" value="5"/>
              <input type="button" value="GO"/>
              </form>X
              </div>

              nur der Gültigkeit wegen, besser wäre es das DIV in das FORM zu packen. Den input Elemente müssen in einem Blockelemt sein.

              <div id="spare_3" class="spare_box"/>

              Was ist das?

              ein Div Tag der durch DOM so erstellt wurde... ist ein "Space"-Div...
              ohne HTML oder TEXT-Inhalt

              <ul class="edit_list_drag">
              <a html="#" style="text-decoration: underline;">add subrow</a>
              </ul>

              Soll das eine Liste sein?

              Ja soll es... vermutlich wäre hier ein <div> besser?

              <ul class="autocompleter-choices" style="z-index: 600; visibility: visible; opacity: 0;"><li>test</li></ul>

              Aha z-index = 600

              die Liste ("edit_list_drag") verdeckt den Autocompleter im IE!...

              logisch,

              z-index:    600;

              dessen z-index ist auch 600

              Wie kommst du drauf das sie Class "edit_list_drag" auch den z-index 600 hat!?

              {
              position:    relative;
              padding:    0.1em 1.5em 0.1em 1em;
              cursor:     pointer;
              font-weight:   normal;
              font-size:    1em;
              }

              wozu ist hier das position relative gut?

              Das CSS ist nicht vollständig von mir... die classes vom Autocompleter stammen von einem JS-Framework das einen Automcompleter beinhaltet...

              Soll ich das <ul element das verdeckt vielleicht mal gegen ein DIV tauschen!?

              1. li id="edit_link_3" class="edit_link level_0">

                soll das ein Start Tag sein? (Ich vermute)

                Ich sag doch, dass ist nur ein Auschnitt.. der der kleine Teil einer  großen Liste

                somit fällt es flach dir zu helfen, wie sollen wir mit Bruchstücken nachvollziehen was bei dir falsch läuft?

                <div id="spare_3" class="spare_box"/>

                Was ist das?

                ein Div Tag der durch DOM so erstellt wurde... ist ein "Space"-Div...
                ohne HTML oder TEXT-Inhalt

                Das ist ja kompletter Schwachsinn (spacer sind HTML Steinzeit), einmal gibt es die CSS Eigenschaft margin und wenn du nur ein Trenner brauchst existiert z.b. das Element <hr>

                <ul class="edit_list_drag">
                <a html="#" style="text-decoration: underline;">add subrow</a>
                </ul>

                Soll das eine Liste sein?

                Ja soll es... vermutlich wäre hier ein <div> besser?

                Quatsch, Eine Liste ohne <li> Elemente macht wohl kaum einen Sinn, oder?

                dessen z-index ist auch 600

                Wie kommst du drauf das sie Class "edit_list_drag" auch den z-index 600 hat!?

                Wegen der "übersichtlichkeit" deines Codes. Hoch scrollen - gucken - runter scrollen - gucken - hoch scrollen - vergleichen - runter scrollen .... irgendwann kommt man da durcheinander, du hast soviele unklare CSS Merkmale dass es schwer fällt das Stückchen schon zu durchschauen.

                wozu ist hier das position relative gut?

                Das CSS ist nicht vollständig von mir... die classes vom Autocompleter stammen von einem JS-Framework das einen Automcompleter beinhaltet...

                Das macht alles noch undurchschaubarer. Ich kann dein Problem mit dem z-index nicht nachvollziehen, der IE stellt bei mir alles so da wie ich es angebe, wenn ich Elemente überlagere

                Soll ich das <ul element das verdeckt vielleicht mal gegen ein DIV tauschen!?

                Wenn du keine Liste hast, dann könntest du ein sinnvollere Element verwenden, aber ob das Einfluss auf das z-index Problem hat ist unwahrscheinlich.

                wie gesagt, ohne eine Beispiel das das von dir postulierte Verhalten zeigt, wird es unmöglich sein dir zu helfen.

                Struppi.