Javascript UL Navigation im IE6

ven · #1 (**permalink**) 28.04.2008, 11:31

Hallo,

ich habe eine UL Navigation aufgebaut und im IE6, IE7, FF etc gecheckt. Wurde alles korrekt dargestellt. Danach baute ich ein Plugin (jQuery Accordion) ein um die einzelnen Menupunke nach unten "sliden" zu lassen. Das ganze könnt ihr hier betrachten (Links das Menu unter der Weißfläche "Logo"):
Statische Umsetzung

Es funktioniert soweit auch super. Nur der IE6 zickt rum. Dort werden Links nicht angezeigt und springen erst bei hover an ihre korrekte Stelle. Hat jemand eine Idee wie ich das beheben könnte?

Hier der HTML Code

Code:

 <div id="navigation">
        <ul id="first">
          <li><a href="#" title="">Unternehmensgruppe</a></li>
          <li><a href="#" title="" class="active">Anwendungsbereiche</a>
          <ul id="second" style="display: none;">
              <li><a href="#" title="">Anwendungsbereiche</a></li>
              <li><a class="active" href="#" title="">Anwendungsbereiche</a>
              	<ul id="third">
                      <li><a class="active" href="#" title="">Anwendungsbereiche</a>
                      	<ul id="fourth">
                          <li><a class="active" href="#" title="">Anwendungsbereiche - Unternehmen</a>
                          	<ul id="fifth">
                              <li><a class="active" href="#" title="">Anwendungsbereiche</a></li>
                              <li class="last"><a href="#" title="">Anwendungsbereiche</a></li>
          					</ul>
                          </li>
                          <li><a href="#" title="">Anwendungsbereiche</a></li>
                          <li class="last"><a href="#" title="">Anwendungsbereiche</a></li>
          				</ul>
                      </li>
                      <li><a href="#" title="">Anwendungsbe</a></li>
                      <li class="last"><a href="#" title="">Anwendungsbereiche - Lustige</a></li>
          		</ul>
                </li>
              <li><a href="#" title="">Anwendungs</a></li>
              <li class="last"><a href="#" title="">Anwendungs</a></li>
          </ul>
          </li>
          <li><a href="#" title="">Pressematerial</a></li>
          <li class="last"><a href="#" title="">Kontakt</a></li>
        </ul>
      </div>

Hier das CSS (alles außer Farben und Hintergrundbilder)

Code:

#subwrap #sidebar #navigation ul { list-style-type: none; margin: 0 !important; padding: 0 !important; }
#subwrap #sidebar #navigation ul#first li { margin: 0 0 0 0; }
#subwrap #sidebar #navigation ul#first li a { display: block; font-size: 11px; text-transform: uppercase; padding: 0 0 0 15px; display: block; text-decoration: none !important; margin: 0 0 0 0; padding: 7px 0 7px 22px; }
#subwrap #sidebar #navigation ul#first li a:hover { text-decoration: underline; }
#subwrap #sidebar #navigation ul li.last {  }

#subwrap #sidebar #navigation ul#first li ul#second { list-style-type: none; margin: 0 0 0 -4px; margin-top: 0 !important; width: 177px; }
#subwrap #sidebar #navigation ul#first li ul#second li { list-style-type: none; margin: 0 0 0 0; }
#subwrap #sidebar #navigation ul#first li ul#second li a { display: block; font-size: 12px; text-transform: none; padding: 7px 0 7px 22px; margin: 0 0 0 0; }
#subwrap #sidebar #navigation ul#first li ul#second li a:hover, #subwrap #sidebar #navigation ul#first li ul#second li a.active:hover {  }
#subwrap #sidebar #navigation ul#first li ul#second li a.active { font-weight: bold; }

#subwrap #sidebar #navigation ul#first li ul#second li ul#third { list-style-type: none; margin: 0 0 0 0; width: 177px; }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li { list-style-type: none; margin: 0 0 0 0; padding: 0 0 0 0; }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li a { display: block; font-size: 12px; text-transform: none; padding: 7px 0 7px 22px; margin: 0 0 0 0; }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li a:hover, #subwrap #sidebar #navigation ul#first li ul#second li ul#third li a.active:hover { }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li a.active { font-weight: bold; }

#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth { list-style-type: none; margin: 0 0 0 0; width: 177px; }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li { list-style-type: none; margin: 0 0 0 0; padding: 0 0 0 0; }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li a { display: block; font-size: 12px; text-transform: none; padding: 7px 0 7px 22px; margin: 0 0 0 0; }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li a:hover, #subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li a.active:hover {  }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li a.active { font-weight: bold; }

#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li ul#fifth { list-style-type: none; margin: 0 0 0 0; width: 177px; }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li ul#fifth li { list-style-type: none; margin: 0 0 0 0; padding: 0 0 0 0; }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li ul#fifth li a { display: block; font-size: 12px; text-transform: none; padding: 7px 0 7px 22px; }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li ul#fifth li a:hover { }
#subwrap #sidebar #navigation ul#first li ul#second li ul#third li ul#fourth li ul#fifth li a.active { font-weight: bold; }

cgdesign · #2 (**permalink**) 28.04.2008, 16:10

Das liegt an deinem supersleight.js für den IE6. Du gibst dem Javascript mit, dass er die a-Tags relative positioniert.
Und zwar mit obj.tagName=='A'. Daran liegt das.

ven · #3 (**permalink**) 29.04.2008, 14:24

cool danke für den hinweis! ich guck mal wie ich das beheben kann, oder kannst du mir da einen tipp mit auf den weg geben?

cgdesign · #4 (**permalink**) 29.04.2008, 14:43

Puh, wahrscheinlich könntest du ein anderes Script benutzen? Das ist doch nur dafür da, um transparente PNG im IE6 anzuzeigen oder?

ven · #5 (**permalink**) 29.04.2008, 14:58

ja genau. besondere am dem script ist jedoch, das er das sogar png's als background-image transparent darstellt und es sich sogar wiederholen (repeat-y) lässt. sieht am an dem schatten rechts und links von dem design (ist ein png von 10px höhe).

die anderen mir bekannten scripte unterstützen diese beiden eigenschaften leider nicht und stellen nur so eingebundene png's transparent dar: <img src=" .... />

cgdesign · #6 (**permalink**) 29.04.2008, 15:43

Dann lösch das doch mit dem obj.tagName=='A' einfach raus.

ven · #7 (**permalink**) 29.04.2008, 16:22

klasse sache, super, danke! hat funktioniert (noch nicht hochgeladen). jetzt ist das menu im ie6 nur noch etwas ruckelig und langsam, im vergleich zum ie7, ff und safari. hast du da auch eine lösung?

)

cgdesign · #8 (**permalink**) 29.04.2008, 16:29

Ja gut, ist halt extrem viel Javascript, was du da einliest. Und dann noch der png-Fix, das kann schon etwas dauern.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Navigation	safari	CSS	12	20.04.2011 12:11
Float-Problem?	mischaef	CSS	33	20.10.2010 17:20
Problem mit FlyOut Menu im IE7	quarki69	CSS	5	15.03.2010 16:46
Vertikale Navigation: IE6 - Whitespace-Bug?	b.erry	CSS	6	12.02.2009 17:46
Container mit 2 Container darin -> Hintergrund anzeigen	bendar	CSS	4	05.04.2005 19:18