Vegeta: Meine Layer funktionieren bei Mozilla nicht (die Zweite)

Um erneut zu meinem Problem im Forums-Archiv unter http://forum.de.selfhtml.org/archiv/2002/6/15090/ zurückzukommen: Ich habe eine Navigationsleiste gemacht, die Layer enthält, d.h. bei einigen Menüpunkten öffnen sich Layer mit Unterkategorien als Links zum Anklicken. Wie das aussieht, könnt ihr mal auf http://www.zockerseite.de.vu/ nachschauen (es werden dort Layer ausschließlich beim Punkt "Spiele" verwendet). Hier gibt es einen Auszug aus dem zugehörigen Quellcode:

<script type="text/javascript">
      <!--
        var isDom = document.getElementById;
        var isDomIE = document.all;
        var isDomNN = document.layers;

function OnLayer(di)
        {
          if (isDom) document.getElementById(di).style.visibility="visible";
          if (isDomIE) document.all[di].style.visibility="visible";
          if (isDomNN) document.layers[di].visibility="visible";
        }

function OutLayer(di)
        {
          if (isDom) document.getElementById(di).style.visibility="hidden";
          if (isDomIE) document.all[di].style.visibility="hidden";
          if (isDomNN) document.layers[di].visibility="hidden";
        }
      //-->
    </script>

<a href="#" target="_self" onClick="javascript:OnLayer('Layer01')" onMouseOut="javascript:OutLayer('Layer01')">Layer öffnen</a>

<div id="Layer01" style="visibility:hidden" onMouseOver="javascript:OnLayer('Layer01')" onMouseOut="javascript:OutLayer('Layer01')">
      Hier ist der Layer01-Inhalt.
    </div>

Das Problem ist nun, daß die Layer bei Mozilla (ich weiß jetzt nicht, ob es mit Netscape auch so ist), eine Zeile zu weit unten angezeigt werden. Die Layer sollten beim Klick nämlich direkt unter dem Link erscheinen. Tjo, dann hab' ich versucht, die Layer mittels CSS-Stylesheets folgendermaßen zu formatieren:

{ background-color:#000000; border:2px solid #646464; font-size:10px; margin-left:2px; padding:2px; position:absolute; width:110px }

Ich weiß nicht, ob margin-top:0px was bringt, aber vielleicht könntet ihr das mal ausprobieren und mir sagen, was ich am Quellcode verändern muß, damit auch die Mozilla-Benutzer mit meinen Layern zufrieden sein können... *g*

  1. Probier mal die Reihenfolge von a br div zu a div br zu ändern, also

    <a onclick="" ..></a><div id=""></div><br>

    Kann aber im IE das Ergebnis nicht voraussagen :(

    1. Probier mal die Reihenfolge von a br div zu a div br zu ändern, also

      <a onclick="" ..></a><div id=""></div><br>

      Kann aber im IE das Ergebnis nicht voraussagen :(

      Nee, des geht nicht. Zumindest nicht im Internet Explorer.

      Ich hab' jetzt stattdessen aber mal margin-top:0px in die Stylesheets geschrieben. Kannst du mal gucken, wie sich die Layer jetzt verhalten?

      1. Ich hab' jetzt stattdessen aber mal margin-top:0px in die Stylesheets geschrieben. Kannst du mal gucken, wie sich die Layer jetzt verhalten?

        Es ändert sich nix. Die div's sind immer noch eine Zeile tiefer.

        1. Ich hab' jetzt stattdessen aber mal margin-top:0px in die Stylesheets geschrieben. Kannst du mal gucken, wie sich die Layer jetzt verhalten?

          Es ändert sich nix. Die div's sind immer noch eine Zeile tiefer.

          Dann verwende ich statt <div> mal <p>. Funktioniert's nun?

          P.S.: Will Mozilla jetzt nicht deswegen installieren. Daher so umständlich jetzt, aber egal... ;-)

          1. Dann verwende ich statt <div> mal <p>. Funktioniert's nun?

            Das ist egal.

            P.S.: Will Mozilla jetzt nicht deswegen installieren. Daher so umständlich jetzt, aber egal... ;-)

            Die 10mb zum download sind nur echt nix.

            1. Das ist egal.

              Dann liegt's doch nicht am CSS, sondern an Mozilla!

              Die 10mb zum download sind nur echt nix.

              Schon, aber ich installier' eben nicht alles mögliche.

              1. Das ist egal.

                Dann liegt's doch nicht am CSS, sondern an Mozilla!

                Falsch. Es liegt weder am CSS noch am Mozilla sondern am IE.

                Normalerweise brauchst du das <br> nicht, wie Kai geschrieben hat, da <div> ein Blocklevelelement ist und einen eigenen Absatz bildet. Seltsammerweise scheint der IE das mal wieder anders zu sehen und klatscht das <div> direkt neben das <a>, statt unter dem <a> einen eigenen Absatz zu bilden.

                1. Wie wäre es denn mit:

                  <div><a href="#" target="_self" onClick="javascript:OnLayer('Layer01')" onMouseOut="javascript:OutLayer('Layer01')">Layer öffnen</a></div>

                  statt:

                  <a href="#" target="_self" onClick="javascript:OnLayer('Layer01')" onMouseOut="javascript:OutLayer('Layer01')">Layer öffnen<br>

                  Dann

  2. hi

    jo, muss auch so sein, wenn man hinter dem eigentlichen Link einen Zeilenumbruch einbaut... schmeiß das <br> hinter dem <a> weg, das ist da über.

    Grüße aus Bleckede

    Kai

    1. jo, muss auch so sein, wenn man hinter dem eigentlichen Link einen Zeilenumbruch einbaut... schmeiß das <br> hinter dem <a> weg, das ist da über.

      Das kann ich nicht machen, weil (zumindest beim Internet Explorer) dann der Layer neben dem Link angezeigt wird und das ist doch wohl auch nicht das Gelbe vom Ei.

      1. jo, muss auch so sein, wenn man hinter dem eigentlichen Link einen Zeilenumbruch einbaut... schmeiß das <br> hinter dem <a> weg, das ist da über.

        Das kann ich nicht machen, weil (zumindest beim Internet Explorer) dann der Layer neben dem Link angezeigt wird und das ist doch wohl auch nicht das Gelbe vom Ei.

        Doch. Wenn du die betreffenden Links  das CSS display:block  hinzufügst.

        1. Doch. Wenn du die betreffenden Links  das CSS display:block  hinzufügst.

          Dann sind so häßliche, unsichtbare Rahmen bei den Links!

      2. hi

        Das kann ich nicht machen, weil (zumindest beim Internet Explorer) dann der Layer neben dem Link angezeigt wird und das ist doch wohl auch nicht das Gelbe vom Ei.

        auha... MSIE = doof.
        Versuch' mal, ob es geht die <a>s mit display:block zu versehen...

        Grüße aus Bleckede

        Kai

        1. Versuch' mal, ob es geht die <a>s mit display:block zu versehen...

          Auch nix. Da bilden sich so dämliche, unsichtbare Rahmen um die Links.

          1. hi

            Auch nix. Da bilden sich so dämliche, unsichtbare Rahmen um die Links.

            unsichtbare Rahmen? Na dann stören sie ja nicht... oder wie jetzt? ;)
            sonst passt es aber?

            Grüße aus Bleckede

            Kai

            1. unsichtbare Rahmen? Na dann stören sie ja nicht... oder wie jetzt? ;)
              sonst passt es aber?

              Mann, dann sind so rieeesige Abstände zwischen meinen Spiele-Links und das sieht gräääßlich aus.