Hallo

Was mich ein wenig wundert, ist der Umstand, dass du hinter dem Link eine Pipe (|) notierst. ...

WOW, du schaust aber genau hin.

Wenn man selbst daran herumgeschraubt hat, fällt einem das auf. 🙂

Ich habe tatsächlich <li></li> rausgenommen, weil das Pipe-Zeichen andernfalls um eine Zeile nach unten gerutscht wäre, und ich zu bequem war, die Ursache im CSS zu suchen. Klar, ein <form></form> innerhalb einer ul ist nicht valide.

Das ist das Spiel mit den CSS-Display-Eigenschaften. Ein Element des Typs form ist per Vorgabe des Browserstylesheets das, was man früher ein Blockelement genannt hat (heute flow content). Das erzeugt innerhalb des li für form eine Box, was wiederum das li vergrößert, indem es eine neue Zeile erzeugt. An der li hintendran (mit li::after) befindet sich auch die Pipe, die aber im durch das form vergrößerten li in dessen letzter Zeile angezeigt wird.

Wenn alle Blockelemente im li auf display: inline; festgelegt werden, was hier fraglos funktioniert, wird keine neue Zeile erzeugt und die Pipe bleibt da, wo sie sein soll.

Ich hab' nochmal nachgebessert:

<li>
<form style="display:inline;"  method="post" action="//webdesign.weisshart.de/chat/" name="user_trans">
<input type="hidden" name="username" value={$user}>
<a style="margin-right:0;" href="javascript:document.user_trans.submit()">Chat</a>
</form>
</li>

Genau das (bis auf die Notation im Style-Attribut). 😅

Jetzt passt es.
Danke für deine Hilfe.

Büdde, büdde.

Tschö, Auge