JavaScript+CSS Problem mit unordered List im IE
nonentity
- browser
0 ChrisB
Hoi
IST-ZUSTAND:
Ich hab auf meiner Seite ein Menü, welches ich aus Daten einer Datenbank generiere und danach mit JavaScript und CSS weiterbehandle.
Kurz: Ich hol mir die Daten aus der DB (so formatiert, quasi: Feld "MenuEbene1", Feld "MenuEbene2", Feld "MenuEbene3", Feld "Unterpunkt") und generiere mir das Menü in Form einer unordered List daraus.
Sieht dann wenn es fertig ist grob so aus:
<ul>
<li>Menü 1, Ebene 1
<ul>
<li>MenüPunkt1, Ebene 2</li>
<li>MenüPunkt2, Ebene 2
<ul>
<li>MenüPunkt1, Ebene 3</li>
</ul></li>
<ul></li>
<li>Menü2, Ebene1
<ul>
....
und so weiter, also ganz einfach ne verschachelte Liste. Jeder <li> und <ul> hat ne ID die seine Position in der Liste verdeutlicht.
Ebene 1 Menüpunkt 1 hat zb M_1_1
Ebene 1 Menüpunkt 1 Untermenü3 zb M_1_1_3
etc.
Hab dazu nur wenig CSS, nur ne position:relative mit Abstand links und list-type:none etc. Hier hantier ich nicht mit display:block oder display:none.
Ich lass dann, nachdem diese Liste vorliegt, ein JavaScript drüberlaufen, dass alle Unterpunkte auf style.display="none" setzt, je nach Ebene (zb will ichs für Ebene 1, dann macht er alles die Ebene darunter unsichtbar, Ebene 4 alles ab inkl. Ebene 5 abwärts etc.).
Mittels Klick auf die Menüpunkte (Links href="javascript....) wird dann je nachdem ein oder ausgeblendet.
So, hoffe meine Vorgehensweise is ungefähr klar, is eigentlich sehr simples JavaScript daher wunder ich mich, dass ich n Problem damit habe.
PROBLEM:
Habs getestet mit Firefox, Chrome, Opera und Safari, keine Probleme bei denen. Nur der Internet Explorer spackt mächtig rum.
Und versteckt er die Unterpunkte zwar, er pass aber die "Höhe", den Abstand zum nächsten darunterliegenden Element nicht an.
so sollts sein:
Menü1 (4 Unterpunkte, ausgeblendet)
Menü2
so siehts aus:
Menü1
Menü2
Wenn ich list-style:none rausnehme zeigt er mit in diesen Zeilen auch die Symbole an, aber den Text dazu nicht.
Außerdem tritt dieses Problem nur mit den <ul>-Punkten auf, die <li> zeigt er nicht an (zb 7 <ul> darunter + 3 <li>, ergibt nur 7 angezeigte Symbole).
Das is bei IE7. Hab vorhin testhalber auf IE8 upgegradet, dachte vl funzts damit - nein, noch schlimmer.
Bei IE8 tritt dieses Verhalten für ALLE Unterpunkte auf, also er zeigt alle "nicht an" auch wenn die x Ebenen darunter liegen (7<ul> mit je nochmal 1 <ul> gibt 14 "nicht angezeigte" Stufen).
Hab schon versucht zusätzlich zum style.display="none" noch ein visibility="hide" anzuhängen, hat nix gebracht.
Lass das Menü für den IE aktuell ohne JS generieren, aber es nervt halt und is bißchen lächerlich, dass der eine Browser da nicht mitzieht.
Wäre für Hilfe dankbar.
Hi,
Nur der Internet Explorer spackt mächtig rum.
Und versteckt er die Unterpunkte zwar, er pass aber die "Höhe", den Abstand zum nächsten darunterliegenden Element nicht an.
Kann ich nicht nachvollziehen, wenn ich einfach das SELFHTML-Beispiel für verschachtelte Listen nehme, und dort die inneren UL mittels JavaScript ausblende - macht der IE 7 problemlos.
Hast du mal ein Online-Beispiel?
MfG ChrisB