Beschriftung einer Sprechblase

Hallo,

ich habe auf meiner Homepage ein Maskottchen, das in einer Sprechblase kurze Texte wiedergibt. Mein Problem ist, je mehr Text ich in die Sprechblase setze, desto weiter rutscht der Text nach rechts, obwohl die Sprechblase nur höher und nicht breiter wird:

http://www.raetselstunde.de/sprechblase.html

Screenshot mit wenig Text in der Sprechblase:

[Blockierte Grafik: http://wishuload.de/images/thumbs/1231067341-57933-Sprechblase4.jpg]

Screenshot mit viel Text in der Sprechblase:

[Blockierte Grafik: http://wishuload.de/images/thumbs/1231067401-94100-Sprechblase5.jpg]

Hier ist ein Auszug aus der CSS-Datei:

.sbl {
background: url(images/bl.gif) bottom left no-repeat #EDEDED;
width: 5%;
min-width: 108px;
}


.sbr {
background: url(images/br.gif) bottom right no-repeat;
}


.stl {
background: url(images/tl.gif) top left no-repeat;
}


.str {
background: url(images/tr.gif) top right no-repeat;
padding: 10px;
}


.sb {
background: url(images/b_r.gif) 25px top no-repeat;
padding: 2px 20px 10px 20px;
}

Und hier der HTML-Code:

<div style="text-align:left;float:left">
<div class="sbl">
<div class="sbr">
<div class="stl">
<div class="str">Meine erste Sprechblase
</div>
</div>
</div>
</div>
<div class="sb"></div>
<img src="http://www.raetselstunde.de/images/maskottchen.jpg" style="float:left; border:0px; margin-right:20px; margin-bottom:10px" alt="Maskottchen" />
</div>
<div style="text-align: left">
Lorem ipsum dolor...
</div>

Habt ihr vielleicht eine Idee, wo der Fehler liegen könnte?

Jetzt ist es richtig. Genauso habe ich es mir vorgestellt

Vielen Dank für die Hilfe.

Edit: Ich hätte noch eine Frage dazu.

Wenn man genau hinsieht, sieht man um das Maskottchen herum einen 1px großen hellblauen Rahmen. Gibt es eine Möglichkeit, den zu entfernen?

Zitat von minder

img
{
border: none;
}

Das ist bereits gesetzt. Daran liegt es nicht.

Mir gefällt das jetzige Maskottchen besser. Die Assoziation mit einem Fragezeichen ist stärker, denke ich mal.

Das mit dem Rahmen hat sich übrigens erledigt. Die hellblauen Linien waren Teil der Grafik. Das habe ich aber erst gesehen, nachdem ich sie 10fach vergrößert hatte