zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Javascript UL Navigation im IE6

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.04.2008, 11:31
ven ven ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.10.2006
Beiträge: 79
ven befindet sich auf einem aufstrebenden Ast
Standard Javascript UL Navigation im IE6

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; }
__________________
Kinderseiten
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.04.2008, 16:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von cgdesign (28.04.2008 um 18:50 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.04.2008, 14:24
ven ven ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.10.2006
Beiträge: 79
ven befindet sich auf einem aufstrebenden Ast
Standard

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?
__________________
Kinderseiten
Mit Zitat antworten
  #4 (permalink)  
Alt 29.04.2008, 14:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Puh, wahrscheinlich könntest du ein anderes Script benutzen? Das ist doch nur dafür da, um transparente PNG im IE6 anzuzeigen oder?
Mit Zitat antworten
  #5 (permalink)  
Alt 29.04.2008, 14:58
ven ven ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.10.2006
Beiträge: 79
ven befindet sich auf einem aufstrebenden Ast
Standard

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=" .... />
__________________
Kinderseiten

Geändert von ven (29.04.2008 um 15:07 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 29.04.2008, 15:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Dann lösch das doch mit dem obj.tagName=='A' einfach raus.
Mit Zitat antworten
  #7 (permalink)  
Alt 29.04.2008, 16:22
ven ven ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.10.2006
Beiträge: 79
ven befindet sich auf einem aufstrebenden Ast
Standard

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? )
__________________
Kinderseiten
Mit Zitat antworten
  #8 (permalink)  
Alt 29.04.2008, 16:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

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

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:51 Uhr.