Probleme mit CSS-Foramtierung der Ajax-Shoutbox

**RainerG** · 07.07.2011, 22:38

Ich habe mir die Ajax-Shoutboux installiert und bin jetzt dabei, über CSS die ausgabe ein wen ig zu formatieren. SASCHA39 hat mir freundlicherweise sein CSS zur Verfügnug gestellt. Nicht unähnlich sahen meine bisherigen Versuche (inzwischen gelöscht) aus.

Code:

/*SHOUTBOX*/
#ShoutboxMessageList {margin-top:15px;}
.shoutboxPost {background-color:#FFFFFF;border:1px solid #dedede;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;padding:5px 15px 10px 5px;margin-bottom:5px;}
.shoutboxPost .avatar img {float:left;padding:3px;background-color:#FFFFFF;border:1px solid #DEDEDE;margin:0px 5px 5px 0px;}
.shoutboxPost .time {float:right;font-weight:bold;}
.shoutboxPost .name {font-weight:bold;}
.shoutboxPost .delete input {float:right;padding:5px;}
.shoutboxPost .message {padding-left:42px;font-style:normal;}

Das Problem hier ist, dass bei zu kurzen Text, die Shoutbox aus der Box der ShoutboxPost heraus ragt.

Ich hab das mal beigefügt. Der erste Text ist lang genug, also alles super. Nur der untere Text ist halt sehr kurz und da ragt der Avatar aus der Box. Ist darunter auch noch eine Box, verschiebt sich zudem dessen Avatar weiter nach rechts.

Was fehlt da noch in dem CSS-Block? Bzw. wie kann ich das Lösen (außer immer genügend Text zu schreiben oder den Avatar wesentlich kleiner zu machen ;-).