Abgerundete Ecken mit Zeilenumbruch

[Padde]

Hallo zusammen,

ich frage mich gerade, wie man (elegant) einen Button mit abgerundeten Ecken über zwei Zeilen erzeugt? Sobald der Umbrauch erfolgt, hab ich am Ende der ersten Zeile eine Gerade und die Rundung wird erst in der zweiten Zeile abgeschlossen. Hat jemand einen Tip?

Hier der Code:

<ul id="navi">
<li class="runderButton"><a href="#" title="#">Erste Zeile Zweite Zeile</a></li>
</ul>

#navi li .runderButton {
border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

Danke.

[Matthias Apsel]

Om nah hoo pez nyeetz, Padde!

#navi li .runderButton {
border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

Reihenfolge beachten. wiki, dort der Hinweis, das hat aber mit deinem Problem nichts zu tun.

Möglicherweise liegt es am Wert der display-Eigenschaft.

Matthias

[Beat]

<ul id="navi">
<li class="runderButton"><a href="#" title="#">Erste Zeile Zweite Zeile</a></li>
</ul>

#navi li .runderButton {
border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

Dein Selektor passt nicht auf den Baum. Da ist kein Element mit Klasse "runder_button" in einem li Element.

Eventuell willst du den Radius soweit erweitern, dass er der folgenden Formel entspricht
Zeilenzahl mal lineheight mal font-size / Zwei

Ist der Radius grösser, dann wird er automatisch verringert.

mfg Beat