li:last-child a - Internetexplorer

[Chriss]

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

[Beat]

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

[Gunnar Bittersmann]

@@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'

[Cheatah]

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

[Gunnar Bittersmann]

@@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'

[Ulysses]

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

[Cheatah]

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

[Beat]

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

[Gunnar Bittersmann]

@@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'

[Cheatah]

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

[Gunnar Bittersmann]

@@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'

[Cheatah]

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

[Gunnar Bittersmann]

@@Chriss:

nuqneH

Gibt es vielleicht für den IE einen Workaround,

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

Qapla'

[Chriss]

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

[MudGuard]

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

[Chriss]

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

[Cheatah]

Hi,

Wie mach ichs richtig?

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

Cheatah

[Chriss]

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.

[Cheatah]

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

[Gunnar Bittersmann]

@@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'

[Gunnar Bittersmann]

@@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'

[Gunnar Bittersmann]

@@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'