Chriss: li:last-child a - Internetexplorer

Hi zusammen,

ich möchte mit border-right eine automatische Trennung zwischen Links realisieren, aber den letzten Pipe ausblenden. Das klappt mit unterem Code und dem FF sehr gut - leider wieder mal nicht mit dem IE. Gibt es vielleicht für den IE einen Workaround, kann ich noch was verbessern, damit es klappt?

  
#header ul#secondary li:last-child a {  
 border: none; }  

Grüße, Chriss

  1. ich möchte mit border-right eine automatische Trennung zwischen Links realisieren, aber den letzten Pipe ausblenden. Das klappt mit unterem Code und dem FF sehr gut - leider wieder mal nicht mit dem IE. Gibt es vielleicht für den IE einen Workaround, kann ich noch was verbessern, damit es klappt?

    #header ul#secondary li:last-child a {
    border: none; }

      
    Entweder: ermittle mit Javascript für MSIE das letzte Element und setze eine Klasse.  
    Oder setze die Klasse serverseitig.  
      
    Übrigens wird in diesem Thread gerade ein Framework diskutiert, das viele MSIE Mängel beheben soll.  
    <https://forum.selfhtml.org/?t=186530&m=1238862>  
      
    mfg Beat
    
    -- 
    
    ><o(((°>           ><o(((°>  
    
       <°)))o><                     ><o(((°>o  
    Der Valigator leibt diese Fische
    
    1. @@Beat:

      nuqneH

      Entweder: ermittle mit Javascript für MSIE das letzte Element und setze eine Klasse.

      Nicht nötig. JavaScript lässt sich als CSS-Expression ausführen.

      Oder setze die Klasse serverseitig.

      Wenn es denn auch im IE ohne JavaScript funktionieren muss, dessen Notwendigkeit ich hier nicht sehe.

      Qapla'

      --
      Bildung lässt sich nicht downloaden. (Günther Jauch)
      1. Hi,

        Nicht nötig. JavaScript lässt sich als CSS-Expression ausführen.

        das hat ggf. Nachteile, weil der IE es zu oft berechnen könnte (Stichwort Performance). Darüber hinaus muss man sich dessen bewusst sein, dass das Ergebnis der Expression im Kontext des Dokuments betrachtet wird und also relative URLs entsprechend anpassen.

        Alternativ kann man natürlich auch darauf verzichten, einen acht Jahre alten Browser mit idealer Darstellung bestücken zu wollen.

        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. @@Cheatah:

          nuqneH

          »» Nicht nötig. JavaScript lässt sich als CSS-Expression ausführen.

          das hat ggf. Nachteile, weil der IE es zu oft berechnen könnte (Stichwort Performance).

          Genau einmal ist sicher nicht zu oft.

          Alternativ kann man natürlich auch darauf verzichten, einen acht Jahre alten Browser mit idealer Darstellung bestücken zu wollen.

          Ist IE 7 wirklich schon so alt?

          Qapla'

          --
          Bildung lässt sich nicht downloaden. (Günther Jauch)
          1. Hi!

            Genau einmal ist sicher nicht zu oft.

            Bei dem verlinkten Artikelist mir schon vor längerer Zeit mal aufgefallen, dass die Datei "counter.js" nicht vorhanden ist...

            FG Ulysses

          2. Hi,

            »» das hat ggf. Nachteile, weil der IE es zu oft berechnen könnte (Stichwort Performance).

            Genau einmal ist sicher nicht zu oft.

            bei Veränderungen verschiedener Art neigt der IE zur Neuberechnung. Dazu könnte auch beispielsweise eine Größenveränderung des Browserfensters gehören.

            »» Alternativ kann man natürlich auch darauf verzichten, einen acht Jahre alten Browser mit idealer Darstellung bestücken zu wollen.
            Ist IE 7 wirklich schon so alt?

            Gegen Ende 2001 (Oktober?) wurde der IE 6 veröffentlicht. Da dieser ebenso wie sein Nachfolger :last-child nicht beherrscht, verstehe ich nicht, warum Du ihn nicht in die Betrachtung aufnimmst. Übrigens benutzt der IE 7 im Wesentlichen die Engines des IE 6, neben Bugfixes wurden nur wenige neue Fähigkeiten implementiert. Insofern kann man auch den IE 7 als acht Jahre alt bezeichnen - oder würdest Du den anno 1958 geborenen Michael Jackson als Twen bezeichnen, weil Teile von ihm jünger sind? ;-)

            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. Insofern kann man auch den IE 7 als acht Jahre alt bezeichnen - oder würdest Du den anno 1958 geborenen Michael Jackson als Twen bezeichnen, weil Teile von ihm jünger sind? ;-)

              Das kommt darauf an, welches Teil genau gemeint ist.

              mfg Beat

              --
              ><o(((°>           ><o(((°>
                 <°)))o><                     ><o(((°>o
              Der Valigator leibt diese Fische
            2. @@Cheatah:

              nuqneH

              »» Genau einmal ist sicher nicht zu oft.

              bei Veränderungen verschiedener Art neigt der IE zur Neuberechnung.

              Aber nicht mehr, wenn sich die Expression beim ersten Aufruf selbst überschreibt. Hast du meinen Artikel ansatzweise überflogen?

              Dazu könnte auch beispielsweise eine Größenveränderung des Browserfensters gehören.

              “Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page.” [SPEEDING-UP]

              So what? Bei den Ereignissen existiert die CSS-Expression schon längst nicht mehr, nachdem sie sich selbst überschrieben hat.

              Qapla'

              --
              Bildung lässt sich nicht downloaden. (Günther Jauch)
              1. Hi,

                Aber nicht mehr, wenn sich die Expression beim ersten Aufruf selbst überschreibt. Hast du meinen Artikel ansatzweise überflogen?

                ja, habe ich. Nicht immer kann damit gerechnet werden, dass die Berechnung nur einmalig passieren muss - und wenn dem nicht so ist, passiert sie häufig zu oft.

                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. @@Cheatah:

                  nuqneH

                  Nicht immer kann damit gerechnet werden, dass die Berechnung nur einmalig passieren muss

                  Der Fall ist hier nicht gegeben. Der OP hat nicht erwähnt, dass die Liste durch JS dynamisch erweitert wird. Da ist wohl davon auszugehen, dass das letzte Listitem auch das letzte bleibt.

                  und wenn dem nicht so ist, passiert sie häufig zu oft.

                  Ja, für Dinge, die bspw. bei Änderung der Viewportgröße angepasst werden müssen, ist eine einmalige Auswertung der CSS-Expression natürlich ungeeignet.

                  Ich hatte noch nicht die Muße zu überlegen, wie die Expression dann auch nicht ständig, sondern eben nur einmalig bei jedem 'resize'-Event auszuwerten ist. Ich halte dies aber auch nicht für unmöglich.

                  Qapla'

                  --
                  Bildung lässt sich nicht downloaden. (Günther Jauch)
                  1. Hi,

                    Der Fall ist hier nicht gegeben.

                    bei einer allgemeinen Warnung, dass der Einsatz dieser Technik potenziell problematisch ist, ist es ziemlich egal, ob ein Einzelfall problemlos ist oder nicht. Mit wie vielen Konjunktiven, gegebenenfallsen und anderen Abschwächungen hätte ich meine Aussage noch würzen sollen?

                    Ich hatte noch nicht die Muße zu überlegen, wie die Expression dann auch nicht ständig, sondern eben nur einmalig bei jedem 'resize'-Event auszuwerten ist. Ich halte dies aber auch nicht für unmöglich.

                    Ja, man kann sich ein kleines Framework ausdenken, dem man Objekte, Ereignisse, eventuell Bedingungen und Berechnungen übergibt. Sollte keine große Schwierigkeit sein, denke ich. Am Ende bleibt etwas der Art 'property: expression(irgendwas(this, window.onresize, new Function(...)[, new Function(...)]);' übrig.

                    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. @@Chriss:

    nuqneH

    Gibt es vielleicht für den IE einen Workaround,

    Ja: eine CSS-Expression, die allerdings etwas anders notiert werden sollte.

    Qapla'

    --
    Bildung lässt sich nicht downloaden. (Günther Jauch)
    1. Hallo Gunnar,
      ich habe jetzt folgende Expression in meine ie.css geschrieben. Es klappt aber irgendwie nicht. Der letzte Strich ist im IE immer noch da. Was könnte da noch falsch sein?

      ~~~css

      footertext p:last-child a
      {
       border: expression( (function (element) { element.style.border = (element.nextSibling ? "1px solid #AAA" : "0 none"); })(this) );
       }

        
      Gruß Chriss
      
      1. Hi,

        ich habe jetzt folgende Expression in meine ie.css geschrieben. Es klappt aber irgendwie nicht. Der letzte Strich ist im IE immer noch da. Was könnte da noch falsch sein?

        footertext p:last-child a

        IE kennt diesen Selektor nicht, folglich ignoriert er das hier:

        {
        border: expression( (function (element) { element.style.border = (element.nextSibling ? "1px solid #AAA" : "0 none"); })(this) );
        }

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Wie mach ichs richtig? Wäre schön, wenn ihr mir sagen könntet, wie ichs richtig schreibe. Kenn mich da nicht so aus. Danke.

            
          a {  
          border-right: expression( (new Function("element", "element.style.borderRight = (element.nextSibling ? "1px solid #AAA" : "0 none")")(this) );  
           }  
          
          

          Gruß Chriss

          1. Hi,

            Wie mach ichs richtig?

            wie lautet denn bei dem von Dir gezeigten Code das Problem?

            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,

              »» Wie mach ichs richtig?

              wie lautet denn bei dem von Dir gezeigten Code das Problem?

              Ich möchte hinter dem letzten Link keine Border-Linie mehr. Der IE stellt sie aber nach wie vor dar.

              1. Hi,

                Ich möchte hinter dem letzten Link keine Border-Linie mehr. Der IE stellt sie aber nach wie vor dar.

                hast Du denn sicher gestellt, dass die border-right-Eigenschaft im IE hierfür verantwortlich ist?

                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. @@Chriss:

            nuqneH

            a {
            border-right: expression( (new Function("element", "element.style.borderRight = (element.nextSibling ? "1px solid #AAA" : "0 none")")(this) );

            Ist:                                       ▲ö     s▲  ▲ö                                                 s▲              ▲ö s▲     ö▲s▲

            Soll:                                      ▲ö     s▲  ▲ö                                                  ▲ö            s▲   ▲ö    s▲s▲

            Im Gegensatz zu Klammern () [] {} gibt es bei "" keine öffnenden und schließenden Zeichen. Das hat zur Folge, dass "" nicht verschachtelt werden können. Es gibt aber auch ''; nutze sie!

            Du willst auch nicht abfragen, ob das 'a'-Element das letzte Kind ist, sondern ob dessen Elternelement 'li' das letzte Kind ist: 'element.[ref:self812;javascript/objekte/node.htm#parent_node@title=parentNode].nextSibling'.

            Qapla'

            --
            Bildung lässt sich nicht downloaden. (Günther Jauch)
            1. @@Gunnar Bittersmann:

              nuqneH

              Oops, da hat mit die Frickelei mit den ▲ so verwirrt, dass ich glatt noch was vergessen hatte:

              Du willst auch nicht abfragen, ob das 'a'-Element das letzte Kind ist, sondern ob dessen Elternelement 'li' das letzte Kind ist: 'element.[ref:self812;javascript/objekte/node.htm#parent_node@title=parentNode].nextSibling'.

              Alternativ (und vermutlich besser und einfacher): nicht die 'a'-Elemente bekommen 'border-right', sondern die 'li'-Elemente.

              Qapla'

              --
              Bildung lässt sich nicht downloaden. (Günther Jauch)
      2. @@Chriss:

        nuqneH

        border: expression( (function (element) { element.style.border = (element.nextSibling ? "1px solid #AAA" : "0 none"); })(this) );

        Du hast nicht bis zum Ende gelesen. So sollstest du es wegen Webkits nicht schreiben.

        Qapla'

        --
        Bildung lässt sich nicht downloaden. (Günther Jauch)