Dynamische Navigation IE6

[Nitram]

Hallo
ich bin neu hier.
Die Aufklappbaren Menüpunkte in meiner Navigation Funktionieren beim IE7 und Firefox mit CSS. Bei dem IE6 nur mithilfe eines Javascript, dort sind die Aufklappbaren Menüpunkte leider zur hälfte verdeckt vom Hauptmenü.
Hier also mein Problem Wie positioniere ich etwas im JavaScript ?.

Das Ergebniss ist Online Unter
http://wp1057282.wp090.webpack.hosteurope.de./
zu sehen.

Hier die JS Datei:

if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}

function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}

function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.position = "absolute"; UL.style.backgroundColor = "#008000";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}

window.onload=hoverIE;
}



Die HTML Datei ist im Anhang enthalten.
Hier die CSS Datei, die allerdings funktioniert:
/* Seitenränder und Wasserzeichen festlegen */

body { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; background: url(sgi-wappen_hintergrund.jpg) center; background-attachment: fixed; background-repeat: no-repeat; background-position: bottom}

/* Kopf- und Fußzeile*/

table#Rahmen {width: 100%}

tr#Kopf {height: 150px}
td#Kopf_Links {width: 185px; background: url(backgroundlinks.gif)}
td#Kopf_Rechts {width: 185px; right; background: url(backgroundrechts.gif)}
tr#Hauptteil {height: 478px}
td#Navigation_Links {width: 185px; background: url(backgroundlinks.gif)}
td#Navigation_Rechts {width: 185px; background: url(backgroundrechts.gif)}

tr#Fuss {font-size: small}
td#Links {background: url(backgroundlinks.gif)}
td#Rechts {background: url(backgroundrechts.gif)}

/* Dynamische Navigation */

ul#Navigation {text-align: center; width: 150px; margin: 1px; padding: 1px; border: 0px solid #008000; background-color: #008000; }

ul#Navigation li {list-style: none; /* ohne width - nach CSS 2.1 erlaubt */position: relative;margin: 0.4em; padding: 0; border: 1px solid gray; background-color: #1aeb1a;}

ul#Navigation li ul {width: 150px; margin: 0; padding: 0;position: absolute;top: 1.6em; left: -0.4em; display: none; /* Unternavigation ausblenden */}

*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */background-color:#008000; padding-bottom:0.4em;}

ul#Navigation li:hover ul {display: block; position: absolute; left: 170px; margin: -33px; /* Unternavigation in modernen Browsern einblenden */}

ul#Navigation li ul li {float: none;display: block;margin-bottom: 0.2em;}

ul#Navigation a:hover, ul#Navigation span, li a#aktuell {border-color: white;border-left-color: black; border-top-color: black;color: white; background-color: #008000;}

ul#Navigation a {display: block; margin: 2px; padding: 0.5px; text-decoration: none; font-weight: bold; color: white; background-color: #1aeb1a; }

[Ingo]

AW: Dynamische Navigation IE6

Hi,
Du hast beim Übertragen des SELFHTML-Beispiels ein paar Fehler gemacht:
1. kein vollständiger DOCTYPE für den standardkonformen Modus
2. die IE6-Hacks zur Korrektur der Anzeigefehler entfernt
3. für standardkonforme Browser nur unureichende Anpassung

Gruß
Ingo

[Nitram]

AW: Dynamische Navigation IE6

Hallo Ingo
wie sieht ein vollständiger Doctype aus, wo liegt also mein Fehler?
Die IE6 Hacks die ich weggelassen habe sind doch nicht für das Überlappen zuständig, oder dies habe ich auch schon ausprobiert.

Kannst du deine Angaben für einen Anfänger bitte genauer erklären?

Danke im vorraus.

G
MfG
Nitram

[Ingo]

AW: Dynamische Navigation IE6

Hi,

wie sieht ein vollständiger Doctype aus, wo liegt also mein Fehler?

http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform

Die IE6 Hacks die ich weggelassen habe sind doch nicht für das Überlappen zuständig, oder dies habe ich auch schon ausprobiert.

aber 1. wohl nicht im standardkonformen Modus und 2. musst Du auch hier die Werte ggfls. anpassen.

Gruß
Ingo

[Nitram]

AW: Dynamische Navigation IE6

Hallo Ingo
das mit dem Doktype habe ich geändert indem ich

"http://www.w3.org/TR/html4/strict.dtd">

eingesetzt habe, so wie es bei self html steht. Bringt auch nicht den gewünschten erfolg.
SELF HTML sagt das IE6 die CSS Basierte Dynamische Navigation nicht darstellen kann. Deshalb die JavaScript Datei. In der JavaScript Anweisung müßte doch das Aufklappmenü Positioniert werden oder nicht?

MfG
Nitram

[Ingo]

AW: Dynamische Navigation IE6

Hi,

das mit dem Doktype habe ich geändert

das sehe ich leider noch nicht online...

SELF HTML sagt das IE6 die CSS Basierte Dynamische Navigation nicht darstellen kann. Deshalb die JavaScript Datei. In der JavaScript Anweisung müßte doch das Aufklappmenü Positioniert werden oder nicht?

Ich hatte dort geschrieben: "Um ein dynamisches Einblenden der Unternavigation auch im Internet Explorer 5 und 6 und anderen Browsern ohne ausreichende CSS-Implementierung zu ermöglichen, bleibt Ihnen derzeit nur eine Realisierung über JavaScript.". Der IE vor Version 7 kann die Pseudoklasse :hover in der Tat nur auf Links anwenden und nicht auf andere Elemente. Daher ist zum Einblenden Javascript erforderlich.
Die Positionierung kann und sollte allerdings im CSS angegeben werden.

Gruß
Ingo

[Nitram]

AW: Dynamische Navigation IE6

Hallo Ingo

danke für deine Tips. Ich habe den Fehler gefunden und beseitigt.

Bis zum nächsten mal

Nitram