Tressna: a: und pseudoklassen - der browser mixt :-?

Hallo,

ich habe ein Problem mit der Darstellung meiner Menupunkte. Ich habe einheitlich definierte Links in rot und unterstrichen. Für die Navi wollte ich diese Formatierungen nicht nutzen und habe deshalb a.navi: definiert. Teile dieser Formatierungen werden auch angezeigt. Leider wird jedoch die Unterstreichung von der allgemeinen a: Beschreibung beim mouseover angezeigt obwohl a.navi:hover text-decoration:none hat. Was kann ich ändern??

Ich arbeite auf Firefox 1.0.7. Wer kann mir da weiterhelfen?

Danke für jeden Hinweis.

Viele Grüße und einen schönen Feiertag morgen,
Tressna

  1. Habe den Code vergessen - sorry:

    <html>
    <head>
    <title>test</title>

    <style type="text/css">
    <!--
    a.navi:link, a.navi:visited, a.navi:hover {
    display: block;
    width: 195px;
    font-family: arial, sans-serif;
    color: #EAEAEA;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    padding-left: 5px;
    }

    a.clicked {
    display: block;
    width: 195px;
    font-family: arial, sans-serif;
    color: #EAEAEA;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    padding-left: 5px;
    background: #cccccc;
    }

    a {
     text-decoration: none;
     color: #111111;
    }

    a:hover {
     text-decoration: underline;
     color: #A70D09;
     cursor: pointer;
    }

    -->
    </style>
    </head>
    <body bgcolor="green">

    <a href="#test" class="clicked">test</a>

    </body>
    </html>

    1. hi,

      <a href="#test" class="clicked">test</a>

      Dieser Link hat überhaupt nicht die Klasse .navi bekommen.

      Für a.clicked hast du die text-decoration entfernt - das hindert den Browser aber nicht daran, für die speziellen "Zustände" eines Links (:link, :hover, ...) trotzdem noch seine Default-Formatierung anzuwenden.

      Du müsstest also für a.clicked:link & co. ebenfalls noch die gewünschte Formatierung angeben.

      Btw: Es ist unsinnig, jeden einzelnen Link in der Navigation mit einer Klasse auszustatten, wenn du doch für alle dort die gleiche Formatierung haben willst. Dann ist es effektiver, mit dem Nachfahrenselektor o.ä. zu arbeiten, siehe http://de.selfhtml.org/navigation/faq.htm#abweichende_verweisfarben

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      1. danke.

        ich habe versucht aus meiner sehr langen Datei die Frage zu selektieren und habe eine falsche Klasse eingesetzt.

        Vielleicht helfen direkte Auszüge aus dem Code. Es geht um:

        <a href="#cat2" class="navi">News and Events</a>

        dazugehöriges css:

        a.navi:link, a.navi:visited, a.navi:hover {
        display: block;
        width: 195px;
        font-family: arial, sans-serif;
        color: #EAEAEA;
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        padding-left: 5px;
        }

        und

        a {
         text-decoration: none;
         color: #111111;
        }

        a:hover {
         text-decoration: underline;
         color: #A70D09;
         cursor: pointer;
        }

        Gehe ich mit der mouse über den Link, so wird er unterstrichen dargestellt. Warum?

        Das mit den Nachfahrenselektoren werde ich beherzigen. Danke für den Tip.

        Tressna

        1. Hi Tressna!

          Gehe ich mit der mouse über den Link, so wird er unterstrichen dargestellt. Warum?

          Meiner Meinung nach musst du die Reihenfolge beachten. So, wie du es gepostet hast, reagiert der Browser mit einem unterstrichenem Link absolut korrekt.

          MfG H☼psel

          --
          "It's amazing I won. I was running against peace, prosperity, and incumbency."
          George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
          Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
          1. Hallo Hopsel,

            ich dachte a.navi entspricht einer höheren Spezifikation und wird dann interpretiert, wenn die Klasse navi zugewiesen wird....

            oder etwas doch nicht?

            1. Hi,

              ich dachte a.navi entspricht einer höheren Spezifikation

              Spezifität. Ja, tut er.

              Cheatah

              --
              X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
              X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
              X-Will-Answer-Email: No
              X-Please-Search-Archive-First: Absolutely Yes
          2. Hallo ForumsleserInnen,

            Gehe ich mit der mouse über den Link, so wird er unterstrichen dargestellt. Warum?
            Meiner Meinung nach musst du die Reihenfolge beachten. So, wie du es gepostet hast, reagiert der Browser mit einem unterstrichenem Link absolut korrekt.

            nein, die Antwort von Tressna ist völlig korrekt. Sobald es Elemente
            gibt, die einer bestimmten Klasse zugeordnet sind, werden die dafür
            festgelegten CSS-Definitionen vorrangig zu denen behandelt, die so
            noch für das Element festgelegt wurden. Falls eine CSS-Definition
            doppelt vorhanden ist, also einmal für element und einmal speziell
            für element.class, wird letztere angewendet. Die Reihenfolge der
            CSS-Definitionen im Quelltext ist dabei völlig unerheblich.

            <html>
            <head>
            <title>Test</title>
            <style type="text/css">
            a.navi { text-decoration: none; }
            a { text-decoration: line-through; }
            </style>
            </head>
            <body>
            <p><a href="#">Link</a></p>
            <p><a href="#" class="navi">Link</a></p>
            </body>
            </html>

            Viele Grüße,
            Stefan

        2. Hallo Tressna,

          Vielleicht helfen direkte Auszüge aus dem Code. Es geht um:

          <a href="#cat2" class="navi">News and Events</a>

          a.navi:link, a.navi:visited, a.navi:hover {
          text-decoration: none;
          }

          a:hover {
          text-decoration: underline;
          }

          Gehe ich mit der mouse über den Link, so wird er unterstrichen dargestellt. Warum?

          dieses Verhalten ist unter Firefox 1.5.0.3 sowie MSIE 6.0 SP2, als
          Betriebssystem verwende ich hier Windows XP, nicht reproduzierbar.

          Vermutlich gibt es noch andere Teile in Deinem Quelltext, die für
          dieses Problem und dessen Lösung wichtig sind. Kannst Du uns den
          Link zu der Seite bzw. einer Testseite geben?

          Viele Grüße,
          Stefan

          1. Hallo Stefan,

            vielen Dank für Deine Antwort. Ja, wahrscheinlich ist eine verwendete JavaScript-Funktion mit an dem Problem beteiligt. Ich würde es auch dringed gerne gelöst wissen, nur habe ich den Code jetzt nicht hier um ihn in voller Länge zu zeigen. Besteht die Möglichkeit auch nächste Woche noch eine mögliche Antwort zu erhalten, oder werden die Beiträge nicht mehr bearbeitet, wenn erst einmal im Archiv?

            Soweit danke ich allen Mithelfern!
            Tressna

            1. hi,

              Besteht die Möglichkeit auch nächste Woche noch eine mögliche Antwort zu erhalten, oder werden die Beiträge nicht mehr bearbeitet, wenn erst einmal im Archiv?

              Neu Postings zu archivierten Threads hinzuzufügen, ist nicht möglich.

              Du kannst aber natürlich gerne einen neuen Thread aufmachen, sollte dieser hier bis dahin im Archiv verschwunden sein - dann bitte mit Verweis auf diesen archivierten Thread hier, damit die Vorgeschichte nachvollziehbar ist.
              Deinen archivierten Thread findest du über die Suchfunktion wieder - über author:Tressna kannst du die Suche ganz einfach auf von dir verfasste Einträge einschränken.

              gruß,
              wahsaga

              --
              /voodoo.css:
              #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hi,

    [...] habe deshalb a.navi: definiert. [...] Leider wird jedoch die Unterstreichung von der allgemeinen a: [...]

    bitte trenne Dich davon, Simple Selectors einen Doppelpunkt hinten anzufügen. Dieser ist Teil von Pseudoklassen (und -elementen) und steht _vor_ diesen. ":hover" ist sinnbehaftet, "a:" kein gültiges CSS und absolut nicht aussagekräftig.

    [...] Beschreibung beim mouseover angezeigt obwohl a.navi:hover text-decoration:none hat. Was kann ich ändern??

    Kein Element des von Dir genannten Codes wird von irgend einem Selektor, der ".navi" enthält, selektiert. Es bleiben die Regeln "a.clicked", "a" (dessen Deklarationen nur bei <a>-Elementen greifen können, die nicht als "clicked" klassifiziert wurden, da jene Regel eine höhere Spezifität besitzt und die Werte somit überschreibt) und "a:hover", die aufgrund ihrer späteren Position im Code und gleicher Spezifität die Werte aus "a.clicked" ggf. überschreibt.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Moin!

      Es bleiben die Regeln "a.clicked", "a" (dessen Deklarationen nur bei <a>-Elementen greifen können, die nicht als "clicked" klassifiziert wurden, da jene Regel eine höhere Spezifität besitzt und die Werte somit überschreibt) und "a:hover"

      Die Spezifität regelt nicht den AUSSCHLUSS einer CSS-Regel, sondern die WIRKSAMKEITSREIHENFOLGE.

      Die Formatierungen von "a" gelten natürlich auch - werden aber von Regeln, die spezifischer sind, überschrieben.

      Formatierte z.B. nur "a" die Schrift fett, und alle spezifischeren Regeln ändern an der font-weight nichts, dann werden alle a-Elemente fett dargestellt.

      - Sven Rautenberg

      --
      My sssignature, my preciousssss!
      1. Hi,

        Es bleiben die Regeln "a.clicked", "a" (dessen Deklarationen nur bei <a>-Elementen greifen können, die nicht als "clicked" klassifiziert wurden, da jene Regel eine höhere Spezifität besitzt und die Werte somit überschreibt) und "a:hover"
        Die Spezifität regelt nicht den AUSSCHLUSS einer CSS-Regel, sondern die WIRKSAMKEITSREIHENFOLGE.
        Die Formatierungen von "a" gelten natürlich auch - werden aber von Regeln, die spezifischer sind, überschrieben.

        ja, selbstverständlich. Nur enthält die Regel für "a" hier ausschließlich Eigenschaften, die auch in "a.clicked" gesetzt werden. Daher auch die Wortwahl "überschreiben".

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes