Dirk Bachert: CSS im Netscape nciht interpretiert, IE läuft... wieso?

Moin,

hab hier ein kleines Style Sheet gemacht, für meine Buttons.. Der IE 6.0 interpretiert alles fehlerfrei, und nu bin ich zu übergegangen, das ganze auch auf dem netscape ansehnlich zu machen. Die Scripte funktionieren schon soweit, nur was mir rätselhaft bleibt, ist, weshabl im Netscape 7 die Stylesheetangaben ignoriert werden... theoretisch müsstne sich die Buttons dank der Positionierung überlappen, aber sie hängen schlicht untereinander...

<style type="text/css">
<!--
body {} ;
#button1  { position:absolute; top:0px;   left:10px;  z-index:12;};
#button2  { position:absolute; top:34px;  left:8px;  z-index:11;};
#button3  { position:absolute; top:64px;  left:8px;  z-index:10;};
#button4  { position:absolute; top:95px;  left:8px;  z-index:9; };
#button5  { position:absolute; top:126px; left:8px; z-index:8; };
#button6  { position:absolute; top:157px; left:8px; z-index:7; };
#button7  { position:absolute; top:188px; left:8px; z-index:6; };
#button8  { position:absolute; top:219px; left:8px; z-index:5; };
#button9  { position:absolute; top:250px; left:8px; z-index:4; };
#button10 { position:absolute; top:281px; left:8px; z-index:3; };
-->

</style>

  1. Hallo,

    <style type="text/css">
    body {} ;

    ^ das gehört da nicht hin.

    Die Strichpunkte hinter den anderen geschweiften Klammern müssen auch weg. Ich galube die das auskommentieren der Styles mit '<!--  -->' kann man sich heutzutage auch sparen.

    Gruß, Jan

    1. Erfolglos :/ Daran lags nicht...

      1. Versuch mal, die unnötigen Leerzeichen noch rauszulöschen, also:

        #button1 {position:absolute; top:0px; left:10px; z-index:12;}

        statt:

        #button1  { position:absolute; top:0px;   left:10px;  z-index:12;}

        Ansonsten sehe ich kein Problem bei dem Stylesheet. Mozilla/NS7 sollte das ohne Problem darstellen.

        Wenn das nicht hilft, poste mal etwas mehr Code oder eine URL, wo man sich das anschauen kann.

        Gruß, Jan

        1. Wenn der Sheet in Ordnung seni sollte bin ich ja beruhigt, weil ich einfach keinen Fehler entdecke... im IE wird es ja auch komplett interpretiert, und tut was es soll...
          Dann poste ich mal den gesamten Quellcode. Zur Info: Ist ein Navbar, der einige Buttons rechtsbündig in einem eigenen Frame darstellt, die sich teilweise überlappen sollen (deswegen das Stylesheet). Bei einem Click wird ein anderes Buttonimage geladen, m den ganzen etwas mehr Design und Dynamik zu geben, so das es wie die Registerkarten eines Ordners wirkt... Insgesamt recht eintönig...

          <HTML>
          <HEAD>
          <TITLE>Navigationsleiste</TITLE>
          <SCRIPT language="JavaScript"><!--
          // Definieren der Variablen für aktive Buttons Script
          var button1a = "ButtonStart.gif";
          var button1b = "ButtonStart2.gif";
          var button2a = "ButtonVorstand.gif";
          var button2b = "ButtonVorstand2.gif";
          var button3a = "ButtonBeirat.gif";
          var button3b = "ButtonBeirat2.gif";
          var button4a = "ButtonPersonal.gif";
          var button4b = "ButtonPersonal2.gif";
          var button5a = "ButtonKonzept.gif";
          var button5b = "ButtonKonzept2.gif";
          var button6a = "ButtonAlbum.gif";
          var button6b = "ButtonAlbum2.gif";
          var button7a = "ButtonProjekt.gif";
          var button7b = "ButtonProjekt2.gif";
          var button8a = "ButtonGebühren.gif";
          var button8b = "ButtonGebühren2.gif";
          var button9a = "ButtonSonstiges.gif";
          var button9b = "ButtonSonstiges2.gif";
          var button10a = "ButtonKontakt.gif";
          var button10b = "ButtonKontakt2.gif";
          var tempbutton = button1b;
          var tempimage = button1a;
          var button = new Array();
          //-->

          function Index1()
          {
           document.getElementById("button1").style.zIndex = 20;
           document.getElementById("button2").style.zIndex = 12;
           document.getElementById("button3").style.zIndex = 11;
           document.getElementById("button4").style.zIndex = 10;
           document.getElementById("button5").style.zIndex = 9;
           document.getElementById("button6").style.zIndex = 8;
           document.getElementById("button7").style.zIndex = 7;
           document.getElementById("button8").style.zIndex = 6;
           document.getElementById("button9").style.zIndex = 5;
           document.getElementById("button10").style.zIndex = 4;
           }

          // die Funktionen Index2 - Index10 hab ich der Übersichtlichkeit halber rausgenommen, da sie Index1 entsprechen, jedoch nur mit anderen Z-Index-Werten

          //-->
          </SCRIPT>
          <style type="text/css">
          body {}
          #button1 {position:absolute; top:0px; left:10px; z-index:12;}
          #button2 {position:absolute; top:34px; left:8px; z-index:11;}
          #button3 {position:absolute; top:64px; left:8px; z-index:10;}
          #button4 {position:absolute; top:95px; left:8px; z-index:9;}
          #button5 {position:absolute; top:126px; left:8px; z-index:8;}
          #button6 {position:absolute; top:157px; left:8px; z-index:7;}
          #button7 {position:absolute; top:188px; left:8px; z-index:6;}
          #button8 {position:absolute; top:219px; left:8px; z-index:5;}
          #button9 {position:absolute; top:250px; left:8px; z-index:4;}
          #button10 {position:absolute; top:281px; left:8px; z-index:3;}
          </style>
          </head>
          <body text="#000000" link="#ff0000" vlink="#008000">
          <body background="Farbverlauf11.jpg">
          <div align="right">

          <div id="button1">
          <a href="start.html" target="Haupt"
          onClick="
          Index1()
          tempbutton.src=tempimage;
          tempbutton=b1;
          tempimage=button1a;
          b1.src=button1b;">
          <img name="b1" src="Buttonstart2.gif" border="0" alt="Startseite"></a><br>
          </div>

          <div id="button2">
          <a href="Vorstand.html" target= "Haupt" onClick="
          Index2()
          tempbutton.src=tempimage;
          tempbutton=b2;
          tempimage=button2a;
          b1.src=button1a;
          b2.src=button2b;">
          <img src="ButtonVorstand.gif"  alt="Der Vorstand" border="0" name="b2" width="132" height"32"></a><br>
          </div>

          <!-- Button3 bis Button10 sind wieder fast identisch mit Button1+2, immer mit andren URLS und Src... //-->

          </body>
          </html>

          1. Hallo,

            <HTML>
            <HEAD>
            <TITLE>Navigationsleiste</TITLE>
            <SCRIPT language="JavaScript"><!--

            Kommentar-Anfang

            // Definieren der Variablen für aktive Buttons Script
            var button1a = "ButtonStart.gif";

            ...

            //-->

            Kommentar-Ende

            function Index1()
            {
            document.getElementById("button1").style.zIndex = 20;

            ...

            }

            //-->

            nochmal Kommentar-Ende?
            Versuch mal die ganzen Kommentierungen wegzulassen.

            </SCRIPT>
            <style type="text/css">
            body {}
            #button1 {position:absolute; top:0px; left:10px; z-index:12;}

            ...
            scheint alles ok zu sein

            </style>
            </head>
            <body text="#000000" link="#ff0000" vlink="#008000">
            <body background="Farbverlauf11.jpg">

            Zweimal body? Pack die Angaben doch auch ins CSS.

            <div align="right">

            <div id="button1">
            <a href="start.html" target="Haupt"
            onClick="
            Index1()

            Sollte hinter das Index1() nicht ein ';'?

            tempbutton.src=tempimage;
            tempbutton=b1;
            tempimage=button1a;
            b1.src=button1b;">
            <img name="b1" src="Buttonstart2.gif" border="0" alt="Startseite"></a><br>
            </div>

            <div id="button2">
            <a href="Vorstand.html" target= "Haupt" onClick="
            Index2()

            und hier auch?

            ...

            Was anderes fällt mir auf den ersten Blick nicht auf.

            Gruß, Jan

            1. Sorry, konnte gestern net mehr posten, meinte immer es wär schone in beitrag in bearbeitung *schulterzuck*
              Jedenfalls aht die Änderung auch kein Ergebnis gebracht... werden die Netscapeuser wohl auf ein wenig dynamisches HTML verzichten müssen.. page bleibt ja voll funktionsähig, nur net so gut anzusehen...

    2. hi,

      Die Strichpunkte hinter den anderen geschweiften Klammern müssen auch weg. Ich galube die das auskommentieren der Styles mit '<!--  -->' kann man sich heutzutage auch sparen.

      auf keinen fall. das ist kurzsichtig gedacht. gerade heutzutage, wo man nicht alleine mit dem pc sondern mit notebooks, handholds, handys (wer weiss was noch kommt?!) surfen kann ist es wichtig die abwärts-kompatibilität zu waren. ich glaube nicht, dass alle browser/geräte zum internet-surfen CSS-fähig sind.
      und ausserdem: diese 7 zeichen mehr tun doch keinem weh.

      schö stefan

      1. Hallo,

        auf keinen fall. das ist kurzsichtig gedacht. gerade heutzutage, wo man nicht alleine mit dem pc sondern mit notebooks, handholds, handys (wer weiss was noch kommt?!) surfen kann ist es wichtig die abwärts-kompatibilität zu waren. ich glaube nicht, dass alle browser/geräte zum internet-surfen CSS-fähig sind.

        Naja, CSS-fähig müssen sie von mir aus gar nicht sein. Sie dürfen nur nicht so blöd sein und das, was da im Head zwischen <style> und </style> steht, als Text interpretieren.

        Gruß, Jan

        1. hi

          Naja, CSS-fähig müssen sie von mir aus gar nicht sein. Sie dürfen nur nicht so blöd sein und das, was da im Head zwischen <style> und </style> steht, als Text interpretieren.

          sind sie aber vielleicht manchmal ;)

          schö stefan