Breite einer Bildzuschrift begrenzen (span)?

[dieselross]

Hallo,

ich habe folgendes Problem: Ich habe eine Galerie, die die Bilder per "hover" über die Thumbnails in einem größeren Ausschnitt anzeigt. Außerdem soll eine Bildzuschrift angezeigt werden. Das klappt auch ganz gut, nur läuft diese zu breit. Z. Zt. arbeite ich mit "<br>" um manuell einen Umbruch zu erzwingen. Das muß aber doch auch eleganter gehen!

Was ich habe ist das folgende:

  
<div id="galerieContainer">  
<ul id="galerie">  
<li>  
<a href="#">  
<img src="media/tmb_01.jpg" alt="Kettenanhänger">  
<span><img src="media/bild01.jpg" alt="Kettenanhänger">  
<span class="Bildzuschrift"><em>Kettenanhänger</em><br>  
in Filigrandrechselei<br>Buchsbaum mit<br>Rahmen aus  
Grenadill,<br>  
in Silber gefaßt,<br>Durchmesser 4&nbsp;cm</span></span>  
</a>  
<li>  
<a href="#">  
<img src="media/tmb_02.jpg" alt="Kettenanhänger">  
<span><img src="media/bild02.jpg" alt="Kettenanhänger">  
<span class="Bildzuschrift"><em>Kettenanhänger</em><br>  
in Filigrandrechselei<br>Grenadill, mit Opal,<br>  
in Silber gefaßt,<br>Durchmesser 3,5&nbsp;cm</span></span>  
</a>  
<li>  
<a href="#">  
<img src="media/tmb_03.jpg" alt="Mühlen">  
<span><img src="media/bild03.jpg" alt="Mühlen">  
<span class="Bildzuschrift"><em>Mühlen</em><br>  
Muskat- und<br>Pfeffermühle,<br>  
Cocobolo,<br>  
Durchmesser 6&nbsp;cm,<br>  
Höhe 10&nbsp;bzw. 15&nbsp;cm</span></span>  
</a>  
</li>  
<li>  
<a href="#">  
<img src="media/tmb_04.jpg" alt="Teelichthalter">  
<span><img src="media/bild04.jpg" alt="Teelichthalter">  
<span class="Bildzuschrift"><em>Teelichthalter</em><br>  
aus Eibe,<br>  
Durchmesser 15&nbsp;cm,<br>Höhe 6,5&nbsp;cm</span></span>  
</a>  
</li>  
<li>  
<a href="#">  
<img src="media/tmb_02.jpg" alt="Kettenanhänger">  
<span><img src="media/bild02.jpg" alt="Kettenanhänger">  
<span class="Bildzuschrift"><em>Kettenanhänger</em><br>  
in Filigrandrechselei<br>Grenadill, mit Opal,<br>  
in Silber gefaßt,<br>Durchmesser 3,5&nbsp;cm</span></span>  
</a>  
</li>  
</ul>  
</div>  

und im CSS:

  
/* Galerieelemente */  
  
#galerieContainer {  
 position: relative;  
 width: 500px;  
 height: 375px;  
 margin: 0px;  
 padding: 0px;  
}  
ul#galerie{  
 width:500px;  
 height:373px;  
 position:relative;  
 margin:0;  
 padding:0;  
 list-style:none;  
 background-image: url(../media/preview.jpg);  
 background-repeat: no-repeat;  
}  
ul#galerie li{  
 float:left;  
 display:inline;  
 margin:0;  
 padding:0;  
 list-style:none;  
 margin-top:375px;  
 width: 100px;  
 height: 75px;  
}  
ul#galerie a span{  
 display:none;  
}  
ul#galerie a:hover{  
 background:none;  
 z-index:100;  
 text-decoration: none;  
}  
ul#galerie a:hover span{  
 width:500px;  
 height:300px;  
 float:left;  
 position: absolute;  
 top:0;  
 left:0;  
 display:block;  
 text-decoration: none;  
}  
ul#galerie img {  
 border: 0px;  
 margin: 0px;  
}  
.Bildzuschrift {  
 position: absolute;  
 top: 0px;  
 width: 150px;  
 margin-left: 510px;  
 font-size: 9pt;  
 color: #666666;  
}  
  

Wer weiß Rat?

Gruß
dieselross