Michael M: Warum klapp es bei firefox nicht!!!

Hi!

Ich habe ein Problem mit CSS!

Mein Ziel ist es das ich einen Link habe, der aus zwei Wörtern besteht!
Eines dieser Wörter soll unterstrichen sein das andere nicht.
Wenn ich nun mit der Maus drüber fahre soll sich das unterstrichene invertieren, also das vorher unterstrichene soll nun nicht mehr unterstrichen sein und das nicht unterstrichene unterstrichen :)

Im IE 6 klapp es schon:

.nav  { color:#ffffff;Font-Size: 30; FONT-FAMILY: Arial, Helvetica, sans-serif;text-align:center}

.nav:link    { text-decoration: underline}
.nav:hover   { text-decoration: none}

.nav div {color:#ffffff;FONT-SIZE: 10; FONT-FAMILY: Arial, Helvetica, sans-serif; text-align:center;text-decoration:none}

.nav:hover div { text-decoration: underline}

<html>

<a href="http://www.suedleasing.de" target="_top" class="nav">
        1stwort
        <div>2.wort</div></a>

aber Firefox lässt hier im dic tag das 2.Wort unterstrichen! Wieso

Please Help!!!!

Danke für eure mühen

  1. Hi,

    Im IE 6 klapp es schon:

    das ist, wie Du sicher weißt, bedeutungsfrei.

    .nav  { color:#ffffff;Font-Size: 30; FONT-FAMILY: Arial, Helvetica, sans-serif;text-align:center}

    Wieso nennst Du die font-size-Eigenschaft, wenn Du ihr keinen gültigen Wert zuweisen möchtest? Soll das ein CSS-Hack sein?

    <a href="http://www.suedleasing.de" target="_top" class="nav">
            1stwort
            <div>2.wort</div></a>

    Wenn Du keinen gültigen HTML-Code schreibst, brauchst Du Dich über die unterschiedlichsten Ergebnisse nicht zu wundern.

    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. Danke für eure schnellen Antworten!

      Wie ihr vielleicht schon gemerkt habt bin ich kein Profi und probier halt einfach mal alles aus! Ich hab jetzt ne Lösung für firefox klappt aber dann im IE nicht!

      a:link { text-decoration: none}
      a:visited { text-decoration: none}

      .nav strong  { color:#ffffff;Font-Size: 30px; FONT-FAMILY: Arial, Helvetica, sans-serif;text-decoration: underline}
      .nav:hover strong   { text-decoration: none}

      .nav span {color:#ffffff;FONT-SIZE: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; text-decoration:none}
      .nav:hover span   { text-decoration: underline}

      <a href="http://blah.de" target="_top" class="nav">
              <strong>1stword</strong>
              <span>2.word</span></a>

      ich weiß nicht ob span besser ist als div wahrscheinlich nicht, macht bitte vorschläge wie es besser geht ich bin auch für Kritik dankbar denn wie soll ich's sonst lernen! :)

      .nav:hover strong   { text-decoration: none} zählt das für alle a oder bezieht sich das nur auf .nav

      Danke Forum

      1. Hi,

        Wie ihr vielleicht schon gemerkt habt bin ich kein Profi

        das macht nichts. Ich kenne viele Profis, die von Tuten und Blasen keine Ahnung haben, und auch einige Amateure, deren Urteil ich blind vertrauen würde.

        Ich hab jetzt ne Lösung für firefox klappt aber dann im IE nicht!

        Gib mal bitte einen Link zur Seite an.

        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. hi,

          es klapp auch nicht :(

          für firefox
          http://www.lordnikon81.de.vu/startff.htm

          für ie
          http://www.lordnikon81.de.vu/startie.htm

          bei meinem IE 5.01 geht nur das ie beispiel!

          Kann ich sonst nicht für jeden Browser eine eigene Version machen oder ist das den aufwand nicht wert?

          Gruß,
          Mich

          1. Hi,

            http://www.lordnikon81.de.vu/startff.htm

            </faq/#Q-19>

            Kann ich sonst nicht für jeden Browser eine eigene Version machen oder ist das den aufwand nicht wert?

            Ist es _definitiv_ nicht. Bitte sorge zunächst dafür, dass der Code validiert - vorher macht es _unter gar keinen Umständen_ Sinn, sich über auftretende Fehler Gedanken zu machen.

            Ich habe mir übrigens nur die FF-Variante angesehen.

            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. hi,

        Ich hab jetzt ne Lösung für firefox klappt aber dann im IE nicht!

        könnte evtl. auch daran liegen:

        .nav:hover strong   { text-decoration: none} zählt das für alle a oder bezieht sich das nur auf .nav

        es bezieht sich auf alle strongs, die kindelemente eines elementes sind, welches die klasse nav hat.

        der IE interpretiert das pseudoformat :hover bekanntlich immer noch nur für links - also vielleicht zeigt er sich williger, wenn du hier explizit a.nav:hover strong verwendest.

        ich weiß nicht ob span besser ist als div wahrscheinlich nicht

        doch, natürlich. span ist, im gegensatz zu div, ein inline element, darf damit also innerhalb von a stehen.

        andere elemente als span sehe ich an dieser stelle auch nicht unbedingt angebracht, weil es ja wirklich nur zu formatierungszwecken dienen soll.

        gruß,
        wahsaga

        --
        "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
        1. Danke wahsaga,
          aber es klapp auch nicht :(

          für firefox

          http://www.lordnikon81.de.vu/startff.htm

          für ie

          http://www.lordnikon81.de.vu/startie.htm

          sonst gehts vielleicht mit java?

          würd wenn es geht aber gerne drauf verzichten!

          1. hi,

            es klapp auch nicht :(

            für firefox
            http://www.lordnikon81.de.vu/startff.htm

            für ie
            http://www.lordnikon81.de.vu/startie.htm

            habe gerade nur den IE 5.01 zum testen zur hand, und in dem "funktionieren" _beide_ beispiele.

            gruß,
            wahsaga

            --
            "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
        2. Hi,

          .nav:hover strong   { text-decoration: none} zählt das für alle a oder bezieht sich das nur auf .nav
          es bezieht sich auf alle strongs, die kindelemente eines elementes sind, welches die klasse nav hat.

          Nein, nicht (nur) Kindelemente, sondern beliebige Nachfahrenelemente.

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          1. hi,

            Nein, nicht (nur) Kindelemente, sondern beliebige Nachfahrenelemente.

            ja, war doch gemeint :-)

            gruß,
            wahsaga

            --
            "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
  2. Hi,

    Ich habe ein Problem mit CSS!

    Nicht nur, auch mit HTML.

    .nav  { color:#ffffff;Font-Size: 30; FONT-FAMILY: Arial, Helvetica, sans-serif;text-align:center}

    30 ist kein sinnvoller Wert für font-size.
    text-align ist hier sinnlos, da das Element, bei dem Du die Klasse verwendest, ein inline-Element ist und daher nur so breit wie sein Inhalt. Also ist gar kein Platz, um irgendeine Ausrichtung vorzunehmen. Aus diesem Grund ist text-align für inline-Elemente gar nicht definiert.

    .nav:link    { text-decoration: underline}
    .nav:hover   { text-decoration: none}

    .nav div {color:#ffffff;FONT-SIZE: 10; FONT-FAMILY: Arial, Helvetica, sans-serif; text-align:center;text-decoration:none}

    Schon wieder ein sinnloser Wert bei font-size.
    Da .nav nur für ein a-Element angegeben ist, hat der Selektor .nav div keinen Sinn, da in HTML ja div nicht in a vorkommen darf.

    .nav:hover div { text-decoration: underline}

    s.o.

    <a href="http://www.suedleasing.de" target="_top" class="nav">
            1stwort
            <div>2.wort</div></a>

    div hat in a nichts verloren.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  3. hi,

    Mein Ziel ist es das ich einen Link habe, der aus zwei Wörtern besteht!

    das kann ja nicht so schwer sein ...

    Eines dieser Wörter soll unterstrichen sein das andere nicht.

    ach so, da kam noch was nach ...

    Wenn ich nun mit der Maus drüber fahre soll sich das unterstrichene invertieren, also das vorher unterstrichene soll nun nicht mehr unterstrichen sein und das nicht unterstrichene unterstrichen :)

    Im IE 6 klapp es schon:

    was mal wieder zeigt, dass der mit jedem sch*** zufrieden ist.

    <a href="http://www.suedleasing.de" target="_top" class="nav">
            1stwort
            <div>2.wort</div></a>

    div hat in a absolut nichts verloren. verbessere das bitte.

    .nav:link    { text-decoration: underline}

    diese definition gilt für dein gesamtes <a>.
    einen teil von dessen inhalt jetzt wiederum nicht zu unterstreichen, ist unmöglich.

    .nav div { ... text-decoration:none}

    wirkungslos, das <a> hat bereits eine unterstreichung, damit hätte der div auch eine (so er denn an dieser stelle erlaubt wäre).

    aber Firefox lässt hier im dic tag das 2.Wort unterstrichen! Wieso

    weils nur absolut logisch ist, s.o.

    wenn du das umsetzen willst, brauchst du m.E. _zwei_ elemente innerhalb deines <a>, für jeden textteil eines, und musst nur diesen dann die underline zuweisen.

    gruß,
    wahsaga

    --
    "Look, that's why there's rules, understand? So that you _think_ before you break 'em."