Ciao a tutti ragazzi. Ho un problema enorme che mi sta rodendo da ormai alcuni giorni. Chiedo aiuto a voi perché non ne genio a capo.

il mio intento è creare una struttura generata dinamicamente come in fig1 che abbia una fotografia con alla base un link con una didascalia in trasparenza.

fig1


Il problema è che la didascalia non ne vuol sapere di essere allineata al fondo dell'immagine, al bordo inferiore come in fig1.
L'allineamento errato che esce fuori è in fig2.

fig2


Se seleziono con firebug tutto il tag[*] ed il suo contenuto si vede chiaramente in fig3 che l'immagine (contenuta nel primo <a>)è riconosciuta dentro al listato mentre la didascalia (contenuta nel secondo <a class="desc"…) non rientra nelle dimensioni del box!

fig3


la struttura generata dinamicamente porta questo codice HTML

codice:
<div id="pop" style="display: block;">
  <ul>[*]
      [img]...[/img] 
      Dai vita ai tuoi dati
      <span class="meta"></span>
      <div style="clear: both;"></div>
      
      [*]
      [img]...[/img] 
      Documentario su Albe Steiner
      <span class="meta"></span>
      <div style="clear: both;"></div>
      
      [*]
      [img]...[/img]Esperimento 
      Exp
      <span class="meta"></span>
      <div style="clear: both;"></div>
      
      
      <li style="border-bottom: 0px none;">
      [img]...[/img] 
      Newsmap: spazio alla visualizzazione
      <span class="meta"></span>
      <div style="clear: both;"></div>
      
      [/list]
</div>

e questo CSS

codice:
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}

#tabs .inside ul {
display:block;
list-style-type:none;
min-height:285px;
}

ol, ul {
list-style:none outside none;
}

#tabs .inside li {
cursor:default;
display:block;
float:left;
height:75px;
margin:5px 10px;
padding:0;
width:130px;
}

#tabs #tagcloud, #tabs .inside li {
font-family:Georgia,serif;
padding:10px;
text-shadow:none;
}

#tabs .inside li a {
color:#555555;
font-weight:bold;
left:0;
position:relative;
text-shadow:none;
}

a:link, a:visited {
color:#999999;
text-decoration:none;
text-shadow:0 -1px 1px #000000;
}

#tabs .inside li img.avatar, #tabs .inside li img.thumbnail {
float:left;
}

.desc {
background:none repeat scroll 0 0 #DDDDDD;
font-size:10px;
font-style:italic;
opacity:0.8;
padding:1px;
position:relative;
width:138px;
z-index:100;
}