Internetexplorer und Navigation im CSS

[PetraB]

hallo zusammen,

es gibt im Archiv 2006 einen Beitrag über CSS Navigation in modernen Browsern und dem Problem, das der IE mehrere (hier waren es zwei) Navigationen in einer Seite nicht anzeigt.

Bei mir sollen vier unabhängige Navigationen rund um den mittleren Bereich  gruppiert werden. Das habe ich mit CSS (ul, li) realisiert und im Opera, Firefox etc. funktioniert das auch.

Für den IE habe ich das im SELFHTML zu findenden Coding auf der Seite eingefügt und entsprechend dem o.a. Hinweis angepasst.

Siehe hier:

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE4() {
    var LI = document.getElementById("Navigation4").firstChild;
    do {
      if (sucheUL4(LI.firstChild)) {
        LI.onmouseover=einblenden4; LI.onmouseout=ausblenden4;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

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

function einblenden4() {
    var UL = sucheUL4(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "ffffcc";
  }
  function ausblenden4() {
    sucheUL4(this.firstChild).style.display = "none";
  };

if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE3() {
    var LI = document.getElementById("Navigation3").firstChild;
    do {
      if (sucheUL3(LI.firstChild)) {
        LI.onmouseover=einblenden3; LI.onmouseout=ausblenden3;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

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

function einblenden3() {
    var UL = sucheUL3(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "ffffcc";
  }
  function ausblenden3() {
    sucheUL3(this.firstChild).style.display = "none";
  };

if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE2() {
    var LI = document.getElementById("Navigation2").firstChild;
    do {
      if (sucheUL2(LI.firstChild)) {
        LI.onmouseover=einblenden2; LI.onmouseout=ausblenden2;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

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

function einblenden2() {
    var UL = sucheUL2(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "ffffcc";
  }
  function ausblenden2() {
    sucheUL2(this.firstChild).style.display = "none";
  };

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.backgroundColor = "ffffcc";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

window.onload = function()
 {hoverIE4();
  hoverIE3();
  hoverIE2();
  hoverIE();
 };

</script>

Leider funktioniert das gar nicht. Die beiden Navigationen rechts reagieren noch nicht einmal auf Mouse-over.

Sieht jemand auf Anhieb, was ich da falsch gemacht habe?

Danke und Gruß,
Petra

[trunx]

Hallo,

ich hab mir jetzt den Text nicht angesehen - hilfreich wäre trotzdem zu wissen, welche IE Version du getestet hast.

Hintergrund ist, dass der IE6 offenbar komplexere Anweisungen nur im Quirksmodus, sprich bei unvollständiger Doctype-Deklaration umsetzt.

bye trunx

[PetraB]

Hallo,

ich hab mir jetzt den Text nicht angesehen - hilfreich wäre trotzdem zu wissen, welche IE Version du getestet hast.

Hintergrund ist, dass der IE6 offenbar komplexere Anweisungen nur im Quirksmodus, sprich bei unvollständiger Doctype-Deklaration umsetzt.

bye trunx

Hi trunx,

ich habe das im IE 5.5, 6.0 und 7.0 getestet und es funktioniert in keinem. Als DOCTYPE wird "-//W3C//DTD HTML 4.01 Transitional//EN" verwendet.

Die anderen habe ich auch getestet, aber das funktioniert überhaupt nicht.

Grüße,
Petra

[Ingo Turski]

Hi,

Hintergrund ist, dass der IE6 offenbar komplexere Anweisungen nur im Quirksmodus, sprich bei unvollständiger Doctype-Deklaration umsetzt.

das habe ich nur selten erlebt und hier dürfte das auch nicht zutreffen.

ich habe das im IE 5.5, 6.0 und 7.0 getestet und es funktioniert in keinem. Als DOCTYPE wird "-//W3C//DTD HTML 4.01 Transitional//EN" verwendet.

zunächstmal solltest Du einen DOCTYPE für den strandardkonformen Modus angeben - dann braucht der IE7 das Script schonmal gar nicht mehr.
Dann solltest Du das Script nicht einfach vervielfältigen, sondern die Funktionen mehrfach nutzen. Es ändert sich ja nur jeweils die ID, so dass eine Schleife wie

  
function hoverIE() {  
  for (var i=1; i<5; i++) {  
    var LI = document.getElementById("Navigation"+i).firstChild;  
    do {  
      if (sucheUL4(LI.firstChild)) {  
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;  
      }  
      LI = LI.nextSibling;  
    }  
    while(LI);  
  }  
}  

viel ökonomischer ist und auch mögliche Codefehler reduziert.
Wenn's nicht funktioniert, dann entspricht Dein HTML vermutlich nicht dem von dieser simplen Funktion Erwarteten.

freundliche Grüße
Ingo

[ChrisB]

Hi,

zunächstmal solltest Du einen DOCTYPE für den strandardkonformen Modus angeben

Also "HTML 4.01 strandcorp" statt strict oder transitional?

MfG ChrisB

[Ingo Turski]

Hi,

Also "HTML 4.01 strandcorp" statt strict oder transitional?

wie gut, dass ich das Wort nicht auch noch verlinkt habe. ;-)

freundliche Grüße
Ingo

[Orlando]

zunächstmal solltest Du einen DOCTYPE für den strandardkonformen Modus angeben

Also "HTML 4.01 strandcorp" statt strict oder transitional?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strandkorb//EN" "http://www.sylt.de/">

Roland