Sabine: Möchte ein Menue-Script ändern

Hallo

ich habe ein einfaches Java-Skript für ein driop-down-Menue im Gebrauch, das ich ändern möchte. Wenn ich mit der Maus über die Menuepunkte fahre, öffnet sich ein Block mit Untermenuepunkten.
Nun möchte ich aber, daß sich die Farben von Haupt- und Untermenuepunkten unterscheiden und ich weiß nicht, wie ich es hinkriege. Vielleicht kann man mir helfen.
Das Skript sieht wie folgt aus:

!--
  function montre(id) {
   if (document.getElementById) {
    document.getElementById(id).style.display="block";
  } else if (document.all) {
    document.all[id].style.display="block";
  } else if (document.layers) {
    document.layers[id].display="block";
  } }

function cache(id) {
   if (document.getElementById) {
    document.getElementById(id).style.display="none";
  } else if (document.all) {
    document.all[id].style.display="none";
  } else if (document.layers) {
    document.layers[id].display="none";
  } }
//-->

Aufgerufen wird es mit z.B.:

<li><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="aktuell.php">
<strong>Aktuelles</strong></a><ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="presse.php">Presse</a></li>
<li><a href="termin.php">Termine</a></li>
</ul></li>

Im style-sheet definiere ich den Hintergrund. Den möchte ich aber verschieden haben in den Haupt- und Untermenuepunkten.

Leider  habe ich nicht das wirklich beste java-script Nachschlagewerk, auch wenn es von o'reilly ist, daher weiß ich nicht, was ich machen muß, um die Unterscheidung programmieren zu können.

Vielen Dank schon jetzt für die Hilfe,

Sabine

  1. Hallo

    wie immer muß ich meine Frage mal wieder ergänzen. Den Block mit den Untermenues kann man im stylesheet definieren, jedoch reagieren die Links nicht mehr auf mouseover und wechseln die Farbe. Mein styleshett sieht so aus:

    div.menu a {
    margin: 0 0px;
    height: 22px;
    display: block;
    text-align: center;
    border: 0px solid gray;
    text-decoration: none;
    color: #FFFFFF;
    background: #EE3338;
    }
    div.menu a:hover {
    color: #EE3338;
    background: #F5F5FF;
    }
    #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6  {
    display: none;
    font-size: 11px;
    font-stretch: condensed;
    font-weight: bolder;
    color: #005DA4;
    background: #F5F5FF;
    }
    #smenu1 a, #smenu2 a,#smenu3 a, #smenu4 a,#smenu5 a,#smenu6 a {
    border-top: 0 none;
    width: 107px;
    color: #F5F5FF;
    background: #005DA4;
    }

    Es wird also z.B.  #smenue1 a vollkommen ignoriert.

    Wo liegt der Fehler?
    Vielen Dank schon jetzt für die Hilfe,

    Sabine

    1. Liebe Sabine,

      [X] Deine Navigation ist aus einer verschachtelten <ul>-Liste aufgebaut, was sinnvoll ist.
      [X] Du verwendest CSS, was sinnvoll ist.
      [?] Du kannst mit CSS umgehen und weißt, wie man verschachtelte Listen per CSS darstellt.

      Liebe Grüße aus Ellwangen,

      Felix Riesterer.

      1. Hi,

        [?] Du kannst mit CSS umgehen und weißt, wie man verschachtelte Listen per CSS darstellt.

        dieser Link dürfte weniger hilfreich sein als http://de.selfhtml.org/css/layouts/navigationsleisten.htm#ebenen.

        freundliche Grüße
        Ingo

        1. Hallo Ingo,

          schön, von Dir zu lesen.

          Das Stylesheet sieht jetzt so aus, aber trotzdem bleibt die Farbe beim Mouseover unverändert.

          #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6  {
          display: none;
          font-size: 11px;
          font-stretch: condensed;
          font-weight: bolder;
          color: #005DA4;
          background: #F5F5FF;
          }
          #smenu1 a, #smenu2 a,#smenu3 a, #smenu4 a,#smenu5 a,#smenu6 a {
          width: 107px;
          color: #F5F5FF;
          background: #005DA4;
          }
          #smenu1 a:hover, #smenu2 a:hover,#smenu3 a:hover, #smenu4   a:hover,#smenu5 a:hover,#smenu6 a:hover {
          width: 107px;
          color: #F5F5FF;
          background: #005DA4;
          }

          Normalerweise müßte dich a:hover für das Mouseover zuständig sein. Aber es klappt nicht. Sehen kann man das ganze auch unter http://www.cdu-si.de/test

          (Mal wieder eine partei-politische Seite, aber ich appelliere an Deine Toleranz!)

          Viele Grüße,

          Sabine

          1. Hi,

            #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6  {

            die IDs sind völlig überflüssig. Für CSS reichen Nachkommenselektoren und für JS this bzw. DOM-Methoden.

            Normalerweise müßte dich a:hover für das Mouseover zuständig sein. Aber es klappt nicht. Sehen kann man das ganze auch unter http://www.cdu-si.de/test

            nette Seite und die Farben finde ich ok.

            Der HTML-Quelltext ist leider verkehrt bzw. unsauber:
              <ul>
                <li>
                  <a><strong>Home</strong></a>
            nicht verkehrt, aber unpassend. Das ist kein hervorgehobenes Wort, sondern ein Link der ersten Ebene.

            <ul id="smenu1"></ul>
            hier fehlt mindestens ein li-Element

            Was aber viel strörender ist: Du verwendest Javascript auch für Browser, in denen diese Dynamik allein über CSS umzusetzen ist. Im Firefox bleiben dadurch auch öfter mal Menüs aufgeklappt, was mit CSS nicht passiert.

            Dein Menü ist ja nahezu so aufgebaut wie das Beispiel http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm (oder meine Version davon ist noch etwas ähnlicher). Orientiere Dich doch einfach daran.

            freundliche Grüße
            Ingo

            1. Hallo

              #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6  {
              die IDs sind völlig überflüssig. Für CSS reichen Nachkommenselektoren und für JS this bzw. DOM-Methoden.

              Ich verstehe mal wieder kaum was von dem, was Du mir schreibst. Mittlerweile glöaube ich zu wissen, daß Nachkommenselektoren h2, h3 etc. sind (?). Aber was ist die DOM-Methode?

              Der HTML-Quelltext ist leider verkehrt bzw. unsauber

              Das weiß ich, jedoch will ich erst ein mal prinzipiell mein Menue zum Laufen bringen, dann geht es ans Aufräumen etc. Das Menue habe ich mehr oder minder von der Seite, die ich Anfang des Jahres gemacht habe, erstmal übernommen. Das vereinfacht die Sache zu Anfang. Ich bin halt faul.....

              Was aber viel strörender ist: Du verwendest Javascript auch für Browser, in denen diese Dynamik allein über CSS umzusetzen ist. Im Firefox bleiben dadurch auch öfter mal Menüs aufgeklappt, was mit CSS nicht passiert.

              Wie kann ich denn eine Browserabfrage machen? Das frage ich mich schon länger und habe noch keine Antwort bekommen? Und wie kann man die Bildschirmgröße abfragen? Dann könnte man die Anzeige optimieren..

              Im Moment mache ich es so, daß ich auf 800 Breite anpasse und es für die anderen Größen passend mache.

              Dein Menü ist ja nahezu so aufgebaut wie ........

              Das hast Du aber neu gemacht. Im Februar gab es noch nicht so ein Menue. Aber läuft es auch im Firefox?

              Grüße,

              Sabine

              1. Hi,

                Ich verstehe mal wieder kaum was von dem, was Du mir schreibst. Mittlerweile glöaube ich zu wissen, daß Nachkommenselektoren h2, h3 etc. sind (?). Aber was ist die DOM-Methode?

                Schau Dir den Quelltext des angegebenen Beispiels http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm an, das kommt auf diese Weise mit nur einer <ul id="Navigation"> aus.

                Wie kann ich denn eine Browserabfrage machen?

                auch das zeigt Dir das Beispiel.

                Und wie kann man die Bildschirmgröße abfragen? Dann könnte man die Anzeige optimieren..

                Davon würde ich Abstand nehmen. Es reicht, wenn die Navigation auch in ein 800er Fenster paßt und die Seite ansonsten flexibel ist.

                Das hast Du aber neu gemacht. Im Februar gab es noch nicht so ein Menue. Aber läuft es auch im Firefox?

                Ja, es läuft in allen gängigen Browsern. Nur (inzwischen) ältere Opera haben bei bestimmten Konstellationen Probleme beim einblenden. Und ja, es ist neu - mit dem neuen Kapitel CSS-basierte Layouts im Selfhtml-Update erschienen.

                freundliche Grüße
                Ingo

                1. Hallo Ingo

                  Schau Dir den Quelltext des angegebenen Beispiels http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm an, das kommt auf diese Weise mit nur einer <ul id="Navigation"> aus.

                  Ich bearbeite jetzt mein Menue auf Dein Skript hin. Dabei ist mir aber aufgefallen, daß die Liste jeweils in der gleichen Farbe definiert ist. In meinem Beispiel ( http://www.cdu-si.de/test ) habe ich aber die Hauptpunkt in rot/weiß und danach geht es über zu blau/weiß. Das funktioniert mit dem Skript so aber nicht, oder? Außerdem muß ich noch die Breite der Hauptmenuepunkte definieren und weiß noch nicht wo.

                  Ich warte gespannt auf eine Antwort

                  Viele Grüße,

                  Sabine

                  1. Hallo Ingo

                    Viel weiter bin ich nun. Die Balken haben die richtige Breite, nur die Farbe zwischen Haupt- und Untermenue unterscheidet sich nicht. Das Problem ist das gleiche. Und nun habe ich das ganze mit dem IE anschauen wollen und dort sehe ich nur einen blauen Balken links. Was ist denn nun auch noch falsch?

                    Schau es Dir doch selber an unter

                    http://www.cdu-si.de/test

                    Vielen Dank schon jetzt und viele Grüße,

                    Sabine

                    1. Hallo Sabine.

                      Was ist denn nun auch noch falsch?

                      http://www.cdu-si.de/test--</faq/#Q-19>, Danke.

                      Da ist ein <script type="text/javascript"> (vor dem Conditional Comment) zuviel.
                      Mich wundert nur, dass Firefox die Seite dennoch anzeigt, Opera tut es nicht...

                      Gruß, Ashura

                      --
                      Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
                      30 Days to becoming an Opera8 Lover -- Day 16: Sessions
                      Meine Browser: Opera 8.0 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
                      [Deshalb frei! - Argumente pro freie Software]
                    2. Hi,

                      Viel weiter bin ich nun. Die Balken haben die richtige Breite, nur die Farbe zwischen Haupt- und Untermenue unterscheidet sich nicht.

                      Du möchtest für ul#Navigation ul a andere andere Farben als für ul#Navigation a haben? ;-)

                      Abgesehen davon solltest Du für ul#Navigation ul eine Hintergrundfarbe festlegen, damit der Text darunter nicht durchscheint; oder die Abstände (ggfls. auf 0) rduzieren.
                      Ein weiteres Problem machen noch die unteren Menüpunkte.

                      Und nun habe ich das ganze mit dem IE anschauen wollen und dort sehe ich nur einen blauen Balken links. Was ist denn nun auch noch falsch?

                      Du hast überlesen:

                      "Beachten Sie:

                      Dieses relativ einfache Script ist speziell für eine Navigation mit zwei ineinander verschachtelten Listen konzipiert. Es prüft nicht, ob der jeweils dritte Knoten die Unternavigation enthält und berücksichtigt auch keine weitere Knoten. Falls Sie außer einfach verschachtelten Listen zusätzliche Elemente einfügen, müssen Sie das Script entsprechend anpassen."

                      Das einfachste ist, auf die - zudem unsinnigen - <strong> zu verzichten. Und wenn Du das Script nicht ändern willst, mußt Du auch die Quelltextstruktur so wie sie ist übernehmen, denn eine Leerzeile ist ein zusätzlicher Textknoten.

                      freundliche Grüße
                      Ingo

                  2. Hi,

                    Ich bearbeite jetzt mein Menue auf Dein Skript hin. Dabei ist mir aber aufgefallen, daß die Liste jeweils in der gleichen Farbe definiert ist. In meinem Beispiel ( http://www.cdu-si.de/test ) habe ich aber die Hauptpunkt in rot/weiß und danach geht es über zu blau/weiß. Das funktioniert mit dem Skript so aber nicht, oder?

                    warum nicht? Die Farbe legst Du im CSS fest: #Navigation li für die Hauptmenüpunkte und #Navigation li li oder #Navigation li ul li für die Unterpunkte. Das ist halt die Sache mit den Nachkommenselektoren.
                    Hiermit legst Du auch die Hintergrundfarbe fest. Im JS wird für den IE der Hintergrund ja nur für die Unterpunkte nochmal gesetzt.

                    Außerdem muß ich noch die Breite der Hauptmenuepunkte definieren und weiß noch nicht wo.

                    Im CSS natürlich. Der Clou bei dieser Lösung ist doch, die Breite den a- bzw. span-Elementen zuzuweisen.

                    freundliche Grüße
                    Ingo

                    1. Hallo

                      es läuft nun. Vielen Dank!

                      Ich denke, morgen oder so werde ich mein Menue von www.volkmarklein.de auch auf diese Art umstellen. Hier streikt ja Firefox auch nicht.

                      Danke nochmal und ganz viele Grüße,

                      Sabine

                      1. Hi,

                        es läuft nun. Vielen Dank!

                        sehr schön. Ich hoffe, Du wirst auch:

                        "Da die Interpretation von JavaScript nicht grundsätzlich vorausgesetzt werden kann und auch andere ältere Browser wie der Internet Explorer für Macintosh die Unternavigation nicht darstellen, ist diese Funktionalität nur ergänzend nutzbar und Sie sollten auf die beim nach oben obigen Beispiel angesprochene alternative Verlinkung nicht verzichten."

                        beherzigen.

                        Auf einen Haken muß ich Dich aber noch hinweisen. Du hast die dem dynamischen Beispiel vorangegangene

                        "Erläuterung:

                        Bei dieser Navigationsleiste muss ein Umbruch verhindert werden, um die richtige Reihenfolge der angezeigten Menüpunkte zu gewährleisten. Dazu ist eine ausreichend große Breite anzugeben, die allerdings nicht der Liste selbst zugewiesen werden sollte, da dies in einigen Browsern zu einer fehlerhaften Darstellung führt. Daher wird ein zusätzliches Element (div#Rahmen) um die Navigationsleiste gesetzt"

                        leider auch überlesen. Verkleinere mal Dein Browserfenster...
                        Nicht ganz so tragisch ist die Verwendung von Pixelwerten - das wirkt sich nur optisch unschön aus bei Schriftvergrößerung.

                        freundliche Grüße
                        Ingo

                        1. Hallo Ingo,

                          vielen Dank für den Hinweis. Den Rahmen werde ich noch setzen.

                          Wenn ich die Hauptmenuepunkte wieder mit einer Übersihctsseite verlinke, dann ist es nicht schlimm, wenn java nicht funktioniert, oder? Denn so habe ich es auch bei volkmarklein.de gemacht.

                          Viele Grüße,

                          Sabine

                          1. Hi,

                            Wenn ich die Hauptmenuepunkte wieder mit einer Übersihctsseite verlinke, dann ist es nicht schlimm, wenn java nicht funktioniert, oder?

                            Ja - und genau das habe ich ja auch empfohlen.
                            Dann hättest Du eine ganz normale und sinnvolle statische Navigation:
                            Hauptmenüpunkt -> Übersichtsseite mit Einführung ins Thema mit Links zu den Unterseiten.
                            Und sinnvoll fände ich dann auch auf den Unterseiten einen kleinen Link zur Übersichtsseite.

                            Nicht ganz elegant wird das freilich, wenn die Übersichtsseiten nur die Links enthalten. Wer das ausgeklappte Menü nutzen kann, für den ist diese Seite dann sinnlos.
                            Eine Möglichkeit, die mir hierzu einfällt, wäre: Über ein Javascript ermitteln, ob die Unternavigation ausgeklappt ist und im positiven Fall das href-Attribut löschen.

                            freundliche Grüße
                            Ingo

                            1. Hallo Ingo,

                              Du stellst alles immer so einfach dar......

                              Wenn man wie ich keine wirklichen Kenntnisse in Javascript hat, weiß man nicht, wie man eine Abfrage macht, ob javascript funktioniert.

                              Wie geht das? Ich habe ja auch ein Buch von o'reilly, das aber nicht wirklich prickelnd ist, und wo ich deshalb nicht viel finde.

                              Viele Grüße,

                              Sabine

                              1. Hallo Ingo nochmal

                                gerade ist mir aufgefallen, daß im IE nur jeweils die ersten beiden Unterpunkte des Menues als Link funktionieren. Bei Firefox ist alles okay. Ws ist denn das schon wieder?

                                Viele Grüße,

                                Sabine

                              2. Hi,

                                Du stellst alles immer so einfach dar......

                                Wenn man wie ich keine wirklichen Kenntnisse in Javascript hat, weiß man nicht, wie man eine Abfrage macht, ob javascript funktioniert.

                                das wäre ja noch einfach, aber hier geht's darum, ob die Navigation ausgeklappt ist oder nicht - und das ist in der Tat nicht so einfach.... habe ich ja auch nicht gesagt. ;-)

                                Übrigens, seltsam:
                                    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
                                    width: 110px;
                                ;-)

                                Das Problem beim IE könnte an den in den Hauptmenüpunkten immer noch vorhandenen <strong> liegen.

                                freundliche Grüße
                                Ingo

                                1. Hallo Ingo,

                                  an strong lag es nicht. Auch habe ich width entfernt, jedoch funktioniert der Link nur bei den ersten 2 Unterpunkten. Auch habe ich noch Schwierigkeiten wegen Überlagerung von Text und Menue. Ich habe z-index eingeführt, aber leider ohne Ergebnis.

                                  Waas kann es sein?

                                  Viele Grüße,

                                  Sabine

                                  1. Hallo Ingo nochmal,

                                    Ich habe width da, wo ich es auf Deine Empfehlung hin weglassen sollte, wieder eingefügt, da sonst die Spalten in Firefox nicht mehr die gewünschte Breite haben.

                                    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
                                    position:relative;
                                           margin: 0; padding: 0; width:110px;

                                    Hab mich schon gewundert, weshalb ich es erst trotz Rat gemacht habe, aber jetzt bin ich beruhigt, daß es Sinn macht!

                                    Viele Grüße,

                                    Sabine

                                    1. Hi,

                                      Hallo Ingo nochmal,

                                      es könnte Sinn machen, vor dem Abschicken eines Postings 1/2 Stunde zu warten..;-)

                                      Ich habe width da, wo ich es auf Deine Empfehlung hin weglassen sollte, wieder eingefügt, da sonst die Spalten in Firefox nicht mehr die gewünschte Breite haben.
                                      Hab mich schon gewundert, weshalb ich es erst trotz Rat gemacht habe, aber jetzt bin ich beruhigt, daß es Sinn macht!

                                      nein - macht es nicht.

                                      Allerdings macht es Sinn, stattdessen den Links eine Breite zuzuweisen. Und nein - "110 px" ist genauso wenig eine Breite wie viele anderer Deiner Angaben.

                                      Deine Problem mit dem IE kannst Du alle ganz einfach lösen ;-)

                                      Dazu müßtest Du Deine Seite allerdings wohl noch ziemlich aufräumen und einige Positionierungen ersetzen.
                                      Außerdem fehlt noch die Anpassung für den IE 5.x. Die Korrekturen über den Star-HTML-Hcack sind so gedacht:

                                        
                                        ul#Navigation a {  
                                          border: 1px solid #FFFFFF;  
                                          width: 110px;  /* KORREKTE Breite den in li enthaltenen Elementen zuweisen */  
                                        }  
                                        
                                        * html ul#Navigation a {  
                                          width: 112px;   /* Breite (+border+padding) nach altem MS-Boxmodell fuer IE 5.x */  
                                          w\idth: 110px;  /* KORREKTE Breite wie oben fuer den IE 6 im standardkompatiblen Modus */  
                                        }  
                                      
                                      ~~~(^^^ das Syntax-Highlighting stimmt hier wohl nicht ganz)  
                                      wobei die 2px nicht wirklich etwas ausmachen, wohl aber die Breite der ganzen Box.  
                                      Bei Schriftvergrößerung (die wegen der px-Werte ja "zum Glück" im IE nicht so ohne weiteres geht) sieht's allerdings nicht besonders gut aus.  
                                        
                                      freundliche Grüße  
                                      Ingo
                                      
                                      -- 
                                      [[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)
                                      
                                      1. Hallo Ingo,

                                        erstmal vielen Dank für Deine Mühe.

                                        Jetzt habe ich Dir gerade schon mal offline was geschrieben und abgeschickt und nun ist es weg. Also schreib ich alles noch einmal hoffentlich.

                                        Also, jetzt habe ich es fast genau so gemacht wie Du geschrieben hast bis auf width was Deiner Meinung nach nicht dahingehört, bei mir aber sonst in Firefox nicht funktioniert, und es funktioniert noch immer nicht ganz. Die Weite habe ich nun überall definiert, auch unter Berücksichtigung des Rahmens, aber je nachdem, von wo ich komme mit der Maus, funktioniert das Untermenue noch nicht. Ich habe auch schon einiges ausprobiert, aber ich finde die Lösung nicht.

                                        Vielleicht liegt es ja an

                                        * html.... width

                                        Dabei weiß ich sowieso nicht, wofür es gut ist. Wahrscheinlich hat es mit dem IE zu tun, aber was drückt der Befehl aus?

                                        Und noch ein Problem habe ich: Wie kann ich die obere Position des Textes für den IE definieren? Bei Firefox klappt es mit margin-top, aber im IE tut sich gar nichts!

                                        Wie kann ich überhaupt die verschiedenen Browser mit css ansprechen und unterscheiden?

                                        Liebe Grüße und vielen Dank,

                                        Sabine

                                        1. Hi,

                                          Also, jetzt habe ich es fast genau so gemacht wie Du geschrieben hast bis auf width was Deiner Meinung nach nicht dahingehört, bei mir aber sonst in Firefox nicht funktioniert,

                                          bitte _lies_ doch, was ich Dir schreibe:

                                          <wiederholung>Allerdings macht es Sinn, stattdessen den Links eine Breite zuzuweisen. Und nein - "110 px" ist genauso wenig eine Breite wie viele anderer Deiner Angaben.</wiederholung>

                                          Jetzt steht bei Dir: ul#Navigation a {width: 108 px;} dies ist *keine* gültige Angabe und wird folglich von standardkonformen Browsern ignoriert. Eine solch falsche Angabe zu ul#Navigation li würde Firefox auch ignorieren, nur hast Du es hier zufällig richtig gemacht.

                                          Und bitte glaube mir, daß die Angabe zu width ausschließlich für a einen Sinn hat; ich habe an diesen Beispielen wirklich ausgiebig gearbeitet, um zu diesem optimalen Code zu kommen.

                                          Die Weite habe ich nun überall definiert, auch unter Berücksichtigung des Rahmens,

                                          eben nicht bzw. nur teilweise. Du vergißt den IE 5.

                                          aber je nachdem, von wo ich komme mit der Maus, funktioniert das Untermenue noch nicht. Ich habe auch schon einiges ausprobiert, aber ich finde die Lösung nicht.

                                          Die Lösung liegt in der Positionierung von ul#Navigation li ul - die zweite Ebene muß nämlich den übergeordneten Listenpunkt um mindestens 1px überlagern. Bei der Entwicklung dieses Beispiels war das der kniffligste Punkt, denn ich habe ja em-werte verwendet, was bei Schriftvergrößerung durch Rundungsungenauigkeiten problematisch werden kann.
                                          Eine Hilfe hierbei war - und ist auch für Dich - diese UL über einen anderen Hintergrund sichtbar zu machen. Dann siehst Du die (sonsst unsichtbare) Überlagerung oder eben einen winzigen Spalt.

                                          Vielleicht liegt es ja an

                                          * html.... width

                                          Dabei weiß ich sowieso nicht, wofür es gut ist. Wahrscheinlich hat es mit dem IE zu tun, aber was drückt der Befehl aus?

                                          Ja, das ist speziell für den IE, genauer die 5er-Versionen. Aber auch das hatte ich Dir in https://forum.selfhtml.org/?t=108622&m=677973 erklärt, oder?

                                          Und noch ein Problem habe ich: Wie kann ich die obere Position des Textes für den IE definieren? Bei Firefox klappt es mit margin-top, aber im IE tut sich gar nichts!

                                          Das ist genau das, was ich Dir sagte: Du hast es mit der absoluten Positionierung der anderen Elemente übertrieben. Reduziere das und lasse möglichst alle Elemente im Fluß. Dann funktioniert margin auch in allen Browsern.

                                          freundliche Grüße
                                          Ingo

                                          1. Hallo Ingo

                                            man kann es kaum glauben, aber ich bin nun viel weiter. Nachdem ich mir heute Nachmittag Deine Antwort, mein und Dein Skript ausgedruckt und im Garten sitzend verglichen habe, habe ich jetzt alles am richtigen Platz und alles funktioniert.

                                            Danke.

                                            Nur eines verstehe ich nicht:

                                            Jetzt steht bei Dir: ul#Navigation a {width: 108 px;} dies ist *keine* gültige Angabe und wird folglich von standardkonformen Browsern ignoriert. Eine solch falsche Angabe zu ul#Navigation li würde Firefox auch ignorieren, nur hast Du es hier zufällig richtig gemacht.

                                            Was ist denn die gültige Form? In ul#Navigation a definiere ich doch auch border und die Farben! Wo soll ich denn sonst die Größe definieren?

                                            Warum habe ich bei ul#Navigation li  es zufällig richtig gemacht? Du behauptest doch, daß dort width nicht hingehört!? Ich verstehe es nicht. Für eine Antwort wäre ich Dir dankbar

                                            viele Grüße,

                                            Sabine

                                            1. Hi,

                                              man kann es kaum glauben, aber ich bin nun viel weiter. Nachdem ich mir heute Nachmittag Deine Antwort, mein und Dein Skript ausgedruckt und im Garten sitzend verglichen habe,

                                              gute Idee. *g*

                                              Nur eines verstehe ich nicht:

                                              Jetzt steht bei Dir: ul#Navigation a {width: 108 px;} dies ist *keine* gültige Angabe
                                              [...]
                                              Warum habe ich bei ul#Navigation li  es zufällig richtig gemacht?

                                              Bitte vergleiche:
                                                width: 108 px;
                                                width: 110px;

                                              und bitte nicht die Zahlenangaben.

                                              freundliche Grüße
                                              Ingo

                                              1. Hallo

                                                Bitte vergleiche:
                                                  width: 108 px;
                                                  width: 110px;

                                                Das Leerzeichen!!!!!!!

                                                Meistens, nicht manchmal, stehe ich mir selbst im Weg.....

                                                Liebe Grüße,

                                                Sabine