figure a {} klemmt

[michaah]

Das habe ich nun mal nachgebaut.

Im Prinzip funktioniert das. Danke für das Codebeispiel.

Im Detail treibt es mich jedoch in den Wahnsinn:

Es ist fast nicht nachvollziehbar welches Element wie anzusprechen ist.

Das summary Element möchte ich nicht so lassen wie es ist. Besonders der schwarze, scheingerundete Trauerrand hat für meine Gestaltungsansprüche erheblichen Um-css-ierungs-Bedarf. Das scheitert aber für mich sofort daran, dass dieser Fiffi nicht auf "border" hört ;-) . Oder es ist nur durch ein Pseudo-<bitte-hier-das-richtige-Element-Attributs-Dingens-einfügen> erreichbar und ich blicke nicht wie? Infos dazu welcome!

Dass sich der Inhalt der Ursprungsseite verschiebt (weil das Summary-Element umpositioniert wird ist unschön. Im gegenwärtigen Beispiel kann ich damit leben, muss es aber mangels Alternative auch. Eine (frei positionierbare) Lösung ohne Auswirkungen auf die Ursprungsseite (so ist das eben mit popupboxen) wäre wünschenswert.

Dass ein umgestalteter details-marker nicht von allen gebräuchlichen Browsern richtig angezeigt wird ist ... bedauerlich, und dass die ganze Konstruktion für IE 9-11 JS bedarf ist ... für mich ein derartig großer Aufwand, dass ich schaue ob ich bei meiner popupbox nicht durch CSS auf ein pseudo-attribut (ist es das?) den "schließen" Text wunschgemäß gestalten und positionieren kann (und die Historyvermüllung für diese temporäre Lösung in Kauf nehme). Das scheint mir derzeit die naheliegenste Lösung ... mal schaun ...

Nitpicks: Das figure Element ist für die Funktion bedeutungslos, habe ich deshalb durch ein div ersetzt. Auch braucht mal wohl das figcaption Element nicht (?), das habe ich aber noch nicht ganz geblickt. Allerdings scheint die benötigte Funktion allein auf dem Zusammenwirken von "details" und "summary" zu beruhen.