tina: Dropdown, das unter IE6 lauft.

Hallo,

ich baue gerade ein dropdownmenue.
ich habe es mit
#menu > ul > li > ul { display:none; }
#menu > ul > li:hover ul { display:block; margin-top:10px; }
gemacht, das die dropdownebene ausblendet und nur beim hovern wieder einblendet.

klappt prima mit ff,safari,ie7 aber nicht 6.

wie löst ihr das?

  1. Hallo,

    ich baue gerade ein dropdownmenue.
    ich habe es mit
    #menu > ul > li > ul { display:none; }
    #menu > ul > li:hover ul { display:block; margin-top:10px; }
    gemacht, das die dropdownebene ausblendet und nur beim hovern wieder einblendet.

    klappt prima mit ff,safari,ie7 aber nicht 6.

    wie löst ihr das?

    Würde gerne eine Lösung ohne Javascript bauen ;-)

  2. klappt prima mit ff,safari,ie7 aber nicht 6.
    wie löst ihr das?

    ich: mit javascript (wer den ie6 verwendet, hat meistens javascript an :p und ist selbst ein größeres sicherheitsrisiko als sein browser)
    gunnar: der verlinkt immer irgend eine conditional comments tabellenmethode ;)

    1. hast Du einen Link für die Varianten (die Du oder gunnar präferieren)

      ich: mit javascript (wer den ie6 verwendet, hat meistens javascript an :p und ist selbst ein größeres sicherheitsrisiko als sein browser)
      gunnar: der verlinkt immer irgend eine conditional comments tabellenmethode ;)

      1. hast Du einen Link für die Varianten (die Du oder gunnar präferieren)

        meine variante ist recht simpel:
        jedes li-element mit kindelementen bekommt 2 eventhandler (onmouseover und onmouseout welche an eine funktion eine elementreferenz auf ihr letztes kindelement übergeben

        die funktion prüft lediglich ob das letzte kindelement ein ul-element ist, wenn ja wird geprüft, ob die display eigenschaft NICHT block ist und ggf auf block gesetzt und umgekehrt

        sprich sind etwa 10 zeilen javascript - viel spass beim nachbauen ;)

        den link zu gunnars präferierter variante unterdrückt mein gehirn sofort, da ich nicht damit leben kann, invaliden code (wenn auch nicht "gefühlt" und versteckt in conditional comments) zu verwenden ;)

        1. meine variante ist recht simpel:
          jedes li-element mit kindelementen bekommt 2 eventhandler (onmouseover und onmouseout welche an eine funktion eine elementreferenz auf ihr letztes kindelement übergeben

          die funktion prüft lediglich ob das letzte kindelement ein ul-element ist, wenn ja wird geprüft, ob die display eigenschaft NICHT block ist und ggf auf block gesetzt und umgekehrt

          sprich sind etwa 10 zeilen javascript - viel spass beim nachbauen ;)

          vielen dank, ich probier´s mal.
          was genau versteht der IE6 eigentlich nicht an dam Konstrukt (mit anderne Worten, was muss man hier für den ie6 weglassen)?

          1. vielen dank, ich probier´s mal.
            was genau versteht der IE6 eigentlich nicht an dam Konstrukt (mit anderne Worten, was muss man hier für den ie6 weglassen)?

            der ie6 versteht die pseudoklasse hover ansich nur auf a-elementen

            die lösung die gunnar immer gerne verlinkt, basiert darauf, dass man um das li-element ein a-element wickelt, in dem dann eine tabelle liegt, die ein und ausgeblendet wird

            das sieht dann irgendwie so aus, wenn ich das in etwa richtig im kopf habe
            <li><a href="foo.html">foobar</a>
              <!--[if IE ]><a href="#"><table><tr><td><![endif]-->
              <ul>
                [...]
              </ul>
              <!--[if IE ]></td></tr></table></a><![endif]-->
            </li>

            1. vielen dank

              was genau versteht der IE6 eigentlich nicht an dam Konstrukt (mit anderne Worten, was muss man hier für den ie6 weglassen)?

              der ie6 versteht die pseudoklasse hover ansich nur auf a-elementen

              andere Frage:
              kann es sein, dass ie6 die css regel: a > b nicht versteht?

              Folgender code macht E2 nicht rot.
              <html>
              <head>
              <style type="text/css">
              .h1 > .h2 {color:red;}
              .h2   .h3 {color:green;}
              </style>
              </head>
              <body>
                   <div class='h1'>E1
                     <div class='h2'>E2
                       <div class='h3'>E3
                       </div>
                     </div>
                   </div>
              </body>
              </html>

              1. andere Frage:
                kann es sein, dass ie6 die css regel: a > b nicht versteht?

                ja, der kindselektor wird ebenfalls nicht unterstützt

                <div class='h1'>E1
                       <div class='h2'>E2
                         <div class='h3'>E3
                         </div>
                       </div>
                     </div>

                was spricht gegen folgendes (folgender code in anlehnung an xhtml 2.0)

                <div class="section">  
                  <h1>E1</h1>  
                  <p>foo</p>  
                  <div class="section">  
                    <h2>E2</h2>  
                      <p>bar</p>  
                    <div class="section">  
                      <h3>E3</h3>  
                      <p>baz</p>  
                    </div>  
                  </div>  
                </div>
                
                1. kann es sein, dass ie6 die css regel: a > b nicht versteht?
                  ja, der kindselektor wird ebenfalls nicht unterstützt
                  was spricht gegen folgendes (folgender code in anlehnung an xhtml 2.0)
                  ...

                  das war nur ein Beispiel, ich hatte in meinem css massehaft a > b was der ie6 nicht verstand. ich denke mir immer dass moderne browser a > b schneller verarbeitem müssten als a b.

                  Mein Ursprüngliches Problem löse ich jetzt so, dass beim ie6 einfach keine dropwowns kommen und man auf eine extra navigationsseite gelangt,auf der die dropdownpukte stehen.

                  1. das war nur ein Beispiel, ich hatte in meinem css massehaft a > b was der ie6 nicht verstand. ich denke mir immer dass moderne browser a > b schneller verarbeitem müssten als a b.

                    ich denke nicht, dass das eine große rolle spielt

                    Mein Ursprüngliches Problem löse ich jetzt so, dass beim ie6 einfach keine dropwowns kommen und man auf eine extra navigationsseite gelangt,auf der die dropdownpukte stehen.

                    das ist aber eine denkbar benutzerunfreundliche lösung

                    1. Mein Ursprüngliches Problem löse ich jetzt so, dass beim ie6 einfach keine dropwowns kommen und man auf eine extra navigationsseite gelangt,auf der die dropdownpukte stehen.

                      das ist aber eine denkbar benutzerunfreundliche lösung

                      So benutzerunfreundliche ist das doch gar nicht.

                      • die Lösung funktioniert ohne JS
                      • ist aus validem code gebaut
                      • ist barrierearm (keine Tabellen)
                      • braucht nur im IE6 (der hoffentlich bald mal ausstirbt .-) einen Klick mehr.

                      Noch besser ist sicher eine Lösung mit der extra navigationsseite (falls kein JS vorhanden ist) und den dropdowns mit JS.
                      Wenn jamand den code parat hat, spare ich mir viel Zeit :-)

                      1. Noch besser ist sicher eine Lösung mit der extra navigationsseite (falls kein JS vorhanden ist) und den dropdowns mit JS.
                        Wenn jamand den code parat hat, spare ich mir viel Zeit :-)

                        ich versuche mich gerade an dem Javascript.
                        Wie kann ich in dem eventhandler denn das auf michs selbst folgende ul ansprechen?
                         <ul>
                           <li><a href='#'>Hauptmeueeintrag 1</a></li>
                           <li onmouseover=""><a href='#'>Hauptmeueeintrag 2</a>
                             <ul>                                     /* den ul will ich im JS ansprechen */
                               <li><a href='#'>sub 1</a></li>
                               <li><a href='#'>sub 2</a></li>
                               <li><a href='#'>sub 3</a></li>
                             </ul>
                           </li>
                        </ul>

                        1. Noch besser ist sicher eine Lösung mit der extra navigationsseite (falls kein JS vorhanden ist) und den dropdowns mit JS.
                          Wenn jamand den code parat hat, spare ich mir viel Zeit :-)

                          ich versuche mich gerade an dem Javascript.
                          Wie kann ich in dem eventhandler denn das auf michs selbst folgende ul ansprechen?
                          <ul>
                             <li><a href='#'>Hauptmeueeintrag 1</a></li>
                             <li onmouseover=""><a href='#'>Hauptmeueeintrag 2</a>
                               <ul>                                     /* den ul will ich im JS ansprechen */
                                 <li><a href='#'>sub 1</a></li>
                                 <li><a href='#'>sub 2</a></li>
                                 <li><a href='#'>sub 3</a></li>
                               </ul>
                             </li>
                          </ul>

                          this ist "sich selbst"
                          this.lastChild ist das letzte kind

                          allerdings musst du hierbei vorsichtig sein, da lastchild in deinem fall ein ein textknoten ist - du musst also zuerst prüfen ob lastchild ein textknoten ist (umbruch und ein paar leerzeichen), wenn ja, dann prüfe das vorherige geschwisterlement (previousSibiling)

                          der internet explorer sieht das übrigens nicht so - für den ist lastChild das ul-element

                          alternativ kannst du aber einfach alle umbrüchen entfernen und deinen code in einer wurst schreiben - wenn dein menü generiert wird, ist das nicht das problem

                          in dem fall also onmouseover="navigation(this);"

                          function navigation(element) {  
                            if (element.lastChild.tagName == 'UL') {  
                              alert('weeeee!');  
                            }  
                          }
                          
                          1. Dankeschön.

                            hier auf: http://de.selfhtml.org/css/layouts/navigationsleisten.htm
                            habe ich ein finde ich elegantes codeschnipsel gefunden, was haltet Ihr von dem?

                            Die erste zeile verstehe ich leider nicht:

                              
                            if(window.navigator.systemLanguage && !window.navigator.language) {  
                            
                            

                            Für was ist das gut?

                            1. Hi,

                              Die erste zeile verstehe ich leider nicht:

                              if(window.navigator.systemLanguage && !window.navigator.language) {

                              
                              > Für was ist das gut?  
                              
                              das ist eine Browserweiche, die ich damals statt der Einbindung des Scripts über conditional comment genommen hatte, um auch den Mac-IE zu erreichen.  
                                
                              freundliche Grüße  
                              Ingo
                              
                              -- 
                              [[barrierefrei Ingo Webdesign](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html) | [IE7 - Bugs](http://www.1ngo.de/web/ie7.html)]
                              
                              1. if(window.navigator.systemLanguage && !window.navigator.language) {

                                
                                > das ist eine Browserweiche, die ich damals statt der Einbindung des Scripts über conditional comment genommen hatte, um auch den Mac-IE zu erreichen.  
                                  
                                Danke, für welche browser liefert die weiche true?
                                
                                1. Hi,

                                  Danke, für welche browser liefert die weiche true?

                                  für alle IEs (ab 5.x?) unter Windows und Mac. Frühere Versionen hatte ich schon damals nicht getestet bzw. wurden getestet.

                                  freundliche Grüße
                                  Ingo

                      2. Hi,

                        Noch besser ist sicher eine Lösung mit der extra navigationsseite (falls kein JS vorhanden ist) und den dropdowns mit JS.

                        warum nur dann? Ich finde Menüpunkte, die zu keiner Seite führen, irritierend.
                        Daher verlinke ich - um auf Deine Eingangsfrage zu kommen - auch die Oberpunkte mit entsprechenden Kapitel-Einstiegsseiten, über die dann (auch) ohne Javascript auf die Unterseiten zugegriffen werden kann.

                        freundliche Grüße
                        Ingo

    2. Hallo!

      gunnar: der verlinkt immer irgend eine conditional comments tabellenmethode ;)

      Ja, das macht er... ;)

      Viele Grüße
      Thorsten

      --
      ie:( fl:( br:< va:) ls:& fo:) rl:° n4:° ss:) de:> js:| ch:? sh:( mo:| zu:)