Probleme verschiedener Browser

[etreu]

Ich möchte auf ner Webseite zur Steuerung nen Menü einbinden.

Wenn man auf den Punkt im Hauptmenü klickt soll darunter dass Untermenü erscheinen.

Dazu ist Untermenü am Anfang per CSS auf display:none gesetzt. Beim klicken wird eine Funktion (Javascript) aufgerufen die diesen Wert auf "block" setzt.

Die Syntax für das all-Objekt ist kein Problem, für DOM auch nicht. Für Netscape 4.x weiss ich nicht wie das Untermenü ansprechen soll, da ich dafür keine Layer/Divs nutzen möchte.

Code (Auszug):

<!--aufruf-->

<a href="javascript:aufdecken('Untermenue')">Menüpunkt</a>

<!--Untermenü-->

<td class="Untermenuezelle">

<table id="Untermenue" class="versteckt">

<tr>

<td>

Untermenüeinträge

</td>

</tr>

</table>

</td>

//javascript am Beispiel für IE 4

function aufdecken(ziel)

{

if (toOpen==0)

{

document.all(ziel).style.display="none";

toOpen=1;

}

else if (toOpen==1)

{

document.all(ziel).style.display="block";

toOpen=0;

}

}

Außerdem hab ich noch diverse Probleme mit Opera:

es werden generell keine Änderungen durchgeführt, weder als IE(all-Objekt) oder als Opera (DOM)(Javascript ist aktiviert)

Achso, eine Sache ist da noch:

Ich habe mir den IE 6 installiert (auf W2K), bekomme allerdings bei Abfrage über das Navigator-Objekt angezeigt es handle sich um den IE 4. Ähnliches Problem gibts bei auf der Arbeit: installiert IE 5.5 auf NT 4, Anzeige: IE 4

[EvilInside]

Ich befürchte, im Netscape 4x wirst Du das nicht hinbekommen können, es sei denn, Du arbeitest doch mit DIVs.

Was Opera betrifft:

Opera kann eine einmal gerenderte Seite nicht mehr verändern. Man kann dort zwar Layer ein- bzw. ausschalten, aber z.B. nicht dynamisch den Inhalt ändern.

Es ist gut möglich, daß dies auch hier das Problem ist.

Eine Lösung wäre - evtl. - den Style der Class direkt zu ändern. Das könnte man über document.styles bewerkstelligen.

Ich weiß spontan aber nicht, ob das mit Netscape 4x dann klappt (ich glaubs nicht )

[etreu]

So, vielleicht ja mein Fehler im Code.

Ich habe mich in etwa an den Code aus SelfHTML gehalten:

http://selfhtml.teamone.de/dhtml/beispiele/navigation.htm

und

http://selfhtml.teamone.de/dhtml/beispiele/dhtml_bibliothek.htm

Das Beispiel funktioniert bei mir mit NN4.7x und Opera 6. Mein Code allerdings nicht. Wo liegt mein Fehler???

mein Script(JavaScript):

var DHTML=false;

var DOM=false;

var MS=false;

var NN=false;

var OP=false;


//nur das für mich relevante aus der Version von SelfHTML


function getBrowser()   //nur anderer Name

{

  if(document.opera)

  {

    OP=true;

  }

  if(document.getElementById)

  {

    DHTML=true;

    DOM=true;

  }

  if(document.all&&!OP)

  {

    DHTML=true;

    MS=true;

  }

  if(document.layers&&!OP)

  {

    DHTML=true;

    NN=true;

  }

}


function setElement(ebene)                   //nur Ebenenänderungen

{

  var elem;


  if(DOM)

  {

     if(typeof document.getElementById(ebene)=="object")

     {

       elem = document.getElementById(ebene);

     }

     else

     {

       elem = void(0);

     }

     return (elem);

  }

  else if(MS)

  {

     if(typeof document.all(ebene)=="object")

     {

       elem = document.all(ebene);

     }

     else

     {

       elem = void(0);

     }

     return (elem);

  }

  else if(NN)

  {

     if(typeof document(ebene)=="object")

     {

       elem = document(ebene);

     }

     else if(typeof document.layers(ebene)=="object")

     {

       elem = document.layers(ebene);

     }

     else

     {

       elem = void(0);

     }

  }

}



/*-------------------------------Hovermenü------------------------------------*/

var toOpen;

var idProject=1;


function hover(ziel,id)

{

  switch (id)

  {

    case 1: {

             toOpen=idProject;

             doHover(ziel);

             idProject=toOpen;

            }

            break;

   }

}


function doHover(ziel)

{

  if (toOpen==0)

  {

    if (NN)

    {

      setElement(ziel).height="1";

      setElement(ziel).style.visibility="hide";

    }

    else

    {

      setElement(ziel).style.height="1";

      setElement(ziel).style.visibility="hidden";

    }

    toOpen=1;

  }

  else if (toOpen==1)

  {

    if (NN)

    {

      setElement(ziel).height="auto";

      setElement(ziel).visibility="show";

    }

    else

    {

      setElement(ziel).style.height="auto";

      setElement(ziel).style.visibility="visible";

    }

    toOpen=0;

  }

}

CSS (Ausschnitt) (wenn der Code funzt werden height und visibility durch display ersetzt)

div.hidden {

            width:250;

            overflow:hidden;

            height:1px;

            visibility:hide;

            visibility:hidden;

            color:white;

            background-color:lightsteelblue;

           }

HTML(Ausschnitt)

<tr class="menu">

      <td class="menu">

        <a href="javascript:hover('subProjects',1)">Projekt</a>

      </td>

    </tr>

    <tr>

      <td class="subMenuZelle">

        <div id="subProjects" style="position:relative;" class="hidden">

        <table class="subMenu">

          <tr class="abstandX">

            <td>   </td>

          </tr>

<!-- Tabelle wird hier noch fortgesetzt -->

[EvilInside]

Ich habe mir das Beispiel mal angesehen.

Wenn Du genau hinsiehst, dann wird Dir auffallen, daß auch dort mit DIV-Tags gearbeitet wird:

<div id="Nav">

 <img src="navigation.gif" width="250" height="450" border="0" alt="">

 <div id="NavLinks">

 <style type="text/css">

  <!--

   a.nav:link    { color:#000080;

      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }

   a.nav:visited { color:#000080;

      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }

   a.nav:hover   { color:#FFFFFF; background-color:#000080;

      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }

   a.nav:active  { color:#000080;

      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }

   -->

  </style>

  <a class="nav" href="http://selfhtml.teamone.de/"><b>SELFHTML</b></a><br>

  <a class="nav" href="http://selfaktuell.teamone.de/"><b>SELFHTML aktuell</b></a><br>

  <a class="nav" href="http://selfforum.teamone.de/"><b>SELFHTML Forum</b></a><br>

  <a class="nav" href="http://selfaktuell.teamone.de/artikel/"><b>Feature Artikel</b></a><br>

 </div>

</div>

Ich denke also, um Layer wirst Du nicht herum kommen.

:cool: Evil

[etreu]

Für die Untermenüs verwende ich Layer (Schau dir den Ausschnitt des HTML-Codes an). Der einzige Unterschied ist, dass ich meine Layer nicht absolut positioniere (habe es auch schon absoluten probiert).